Question

It’s approximately the same problem as this post : slide div offscreen, append content with ajax call, slide div onscreen

But I can’t have the animation. I think it’s because my div #section has width:100%.

This is my html code :

<div class="coda-slider" id="slider-id">  
    <div id="section" class="screen_active">
        //content of my first page with the link of the page I need
        //to load on the next div
    </div>
    <div id="section" class="screen"></div> //empty div for the ajax request
</div>

Here is the JS of the click event :

$.ajaxSetup({
    cache: false
});

$('.ei-title h2 a').click(function() {
    event.preventDefault();
    // Get the URL of the page to load
    var url = $(this).attr('href');
    $('.screen').load(url); // load the content to the second div
    $(".screen_active").animate({left: '-50%'}, 500, function() {
        $(".screen_active").css('left', '150%');
        $(".screen_active").appendTo('.screen');
    }); //animate
    $(".screen").load(url).animate({left: '50%'}, 500);
});

Voilà, with this my content is perfectly loaded, but I don’t have any animation of my divs.

Thank you for the help.

Edit:

I made this JS code :
I made the following code and it works fine :
` $.ajaxSetup({
cache: false
});

$('.ei-title h2 a').click(function() {
    event.preventDefault();
    // Get the URL of the page to load
    var url = $(this).attr('href');
    $('#section2').load(url, function() { // load the content to the second div
        $("#section").animate({left: '-100%'}, 1500, function() {
            $("#section").css('left', '100%');
            $("#section").appendTo('#section2');
        }); //animate
        $('#section2').animate({left: '0%'}, 1500);
    });
});`

And this CSS code :

.screen_active {
    position : absolute;
    width: 100%;
    left: 0%;
}

.screen {
    position : absolute;
    width:100%;
    left: 100%;
}   

It works fine 🙂
Thank you for the help !

Answer 1

Based on the documentation, set the next animation in the callback function. In your case should be:

$('.ei-title h2 a').click(function() {
    event.preventDefault();
    // Get the URL of the page to load
    var url = $(this).attr('href');
    $('.screen').load(url, function() { // load the content to the second div
        $(".screen_active").animate({left: '-50%'}, 500, function() {
            $(".screen_active").css('left', '150%');
            $(".screen_active").appendTo('.screen');
        }); //animate
    });
    $(".screen").load(url, function() {
        $(this).animate({left: '50%'}, 500);
    });
});