Question

I’m facing a problem in jquery :animated selector, i use the callback function inside the jquery animate function to call ajax page after animation done but the problem : the calling page via ajax is called double times !

$('#elemId').click(function(){
$('html,body').animate({scrollTop: $('#sections_display').offset().top-100}, 500, function(){
        $('#sections_display').load('page.php');
});
});

The result “page.php is loaded twice times ! in firebug”.

So i tried:

$('#elemId').click(function(){
       $('html,body').animate({scrollTop: $('#sections_display').offset().top-100}, 500);
});

if ($('html,body').is(":animated")) {
     $('#sections_display').load('page.php');
}

The problem is if ($('html,body').is(":animated")) always return true during animation of the page but i want to return true after animation finished.

Also i tried :

$('#elemId').click(function(){
$('html,body').animate({scrollTop: $('#sections_display').offset().top-100}, 500, function(){
    if ($(this).is(":animated")) {
        $('#sections_display').load('page.php');
    }
});
});

The result “page.php is loaded twice times”.

Answer 1

The result “page.php is loaded twice times ! in firebug”.

That’s because you’re attaching the event to both html and body. Try just html:

$('#elemId').click(function(){
    $('html').animate({scrollTop: $('#sections_display').offset().top-100}, 500, function(){
            $('#sections_display').load('page.php');
    });
});