javascript - .is (":animated") 选择器在动画期间返回 true 并调用两次

Question

我在 jquery :animated 选择器中遇到问题，我使用 jquery animate 函数中的回调函数在动画完成后调用 ajax 页面，但问题是:通过ajax调用的页面被调用了两倍!

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

结果“page.php 被加载两次!在 Firebug 中”。

所以我尝试了:

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

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

问题是 if ($('html,body').is(":animated")) 在页面动画期间总是返回 true 但我想要动画结束后返回true。

我也试过了:

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

结果“page.php 被加载了两次”。

Answer 1

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

那是因为您将事件附加到 html 和 body。试试 html:

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