Transition effect on loading new page, AJAX

Question

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...

can you provide your codes? what you have done so far? – thenewseattle Nov 24 '13 at 22:58 — thenewseattle, Nov 24 '13 at 22:58

score 5 · Accepted Answer · answered Nov 25 '13 at 03:18

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)
})

I only tested the load() function but not the whole animation, the idea is pretty simple: 1. on Click pass the href 2. create a wrapper and load href page contents inside 3. Hide the new contents to the far right then once completely loaded move to left. 4. If there is a previous content move it also to the far left to hide then once the animation is complete remove it so it won't get crowded :D — Mark S, Nov 25 '13 at 03:22
I see. My answer will fit in your markup as well, `loadContent()` function will handle things from loading the new page up to the animation. But you may need to change some selector in the function. I've added a solution in this **[jsfiddle](http://jsfiddle.net/mark_s/Pcn88/2/)** with some comments that you should read. It won't show result in jsfiddle as the site won't allow GET method but I tested it in my localserver and it is working fine. Cheers! — Mark S, Nov 26 '13 at 01:13
Thank you! I analysed the code you posted and I think I understand how it works, so, It'll help me a lot :) I'll definitely use this in my project. — Mary1517, Nov 28 '13 at 22:15

Transition effect on loading new page, AJAX

1 Answers1