CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
Mary1517
Mary1517

Reputation: 13

Transition effect on loading new page, AJAX

So, on my website I'm using THIS METHOD of loading content from a external html file using AJAX. It looks good and all but, what I'm trying to do is add a page transition when the content is changing. Like when you click "home" the page not automatic changes the text in the div but rather slide the current one to the left, out of the screen, and at the same time slide the new content from the right. And I'm not looking for a "one page" solution btw. I know how to make a "fading" effect" but sliding? Thanks for any tips and solutions. And sorry for a noobish question like that...

Upvotes: 0

Views: 7058

Answers (1)

Mark S
Mark S

Reputation: 3799

Using AJAX XMLHttpRequest() is not a good idea for new devs especially nowadays with how each browser implements their own XMLHttpRequest(). I suggest using jQuery's AJAX Framework $.ajax() or it's shorthand function $.get(). But in your case I would recommend .load()which is roughly equivalent to $.get().

Since you didn't include your codes (but you should next time!). Here is a simple example:

HTML:

<ul class="menu">
   <li><a href="home.html">Home</a></li>
   <li><a href="about.html">About</a></li>
   <li><a href="services.html">Services</a></li>
</ul>
<div id="contents">
 <!-- Place the loaded contents here -->
</div>

CSS:

body {overflow-x:hidden;}
.loaded_content_wrapper { 
    overflow:hidden; 
    margin-left:100%; 
    width:100%; 
    position:absolute;
}

JS:

function loadContent(href){
    /* Create the content wrapper and append it to div#contents 
       then load the contents to the wrapper 
    */
    $wrapper = $('<div>'); 
    $wrapper.addClass('loaded_content_wrapper').appendTo('#contents').load(href, function(){
        /* When the content is completely loaded 
           animate the new content from right to left 
           also the previous content slide to left and remove afterwards.
        */
        $(this).animate({marginLeft:0}, 'slow').prev().animate({marginLeft:'-100%'}, 'slow', function(){
            $(this).remove(); //remove previous content once the animation is complete
        });
    })
}

$('a').click(function(e){
    e.preventDefault();
    var href = $(this).attr('href');
    loadContent(href)
})

Upvotes: 5

Related Questions