.animate() 的回调被调用两次 jquery

Question

由于我添加了一些scrollTop-animation，我的回调的某些部分被调用了两次：

$('html, body').animate({scrollTop: '0px'}, 300,function() {
    $('#content').load(window.location.href, postdata, function() {                 
        $('#step2').addClass('stepactive').hide().fadeIn(700, function() {
            $('#content').show('slide',800);                    
        });
    });
});

它似乎只是重复了.show()，至少我不觉得load() 或.fadeIn() 也会被第二次调用。 .show() 第一次完成后会立即重复。顺便说一下，将 scrollTop 动画速度设置为 0 并没有帮助！

我认为它与动画队列有关，但我不知道如何找到解决方法，尤其是为什么会发生这种情况。

Answer 1

要获得完成多个元素动画的单个回调，请使用延迟对象。

$(".myClass").animate({
  marginLeft: "30em"
}).promise().done(function(){
  alert("Done animating");
});

当您对集合调用 .animate 时，集合中的每个元素都会单独设置动画。当每一个都完成时，回调被调用。这意味着如果您为八个元素设置动画，您将获得八个回调。当这八个元素上的所有动画完成时，.promise().done(...) 解决方案会为您提供一个回调。这确实有一个副作用，如果在这八个元素中的任何一个上发生了任何 其他 动画，则回调将不会发生，直到这些动画也完成。

有关Promise 和Deferred Objects 的详细说明，请参阅jQuery API。

Answer 2

animate 为您调用animate 的集合中的每个元素 调用一次回调：

如果提供，start、step、progress、complete、done、fail 和 always 回调将在每个元素的基础上调用...

由于您要为两个元素（html 元素和 body 元素）设置动画，因此您会收到两个回调。 （对于任何想知道为什么 OP 为两个元素设置动画的人，这是因为动画在某些浏览器上适用于 body，而在其他浏览器上适用于 html。） p>

要在动画完成时获得 单个 回调，animate 文档指出您使用 promise 方法获取动画队列的承诺，然后使用 then 来排队回调：

$("html, body").animate(/*...*/)
    .promise().then(function() {
        // Animation complete
    });

（注意：Kevin B 在第一次提出问题时指出了这一点 in his answer。直到四年后我才发现它丢失了，添加了它，然后......然后看到了 Kevin 的回答.请给他应得的爱。我想这是公认的答案，我应该把它留在里面。）

这是一个显示单个元素回调和整体完成回调的示例：

jQuery(function($) {

  $("#one, #two").animate({
    marginLeft: "30em"
  }, function() {
    // Called per element
    display("Done animating " + this.id);
  }).promise().then(function() {
    // Called when the animation in total is complete
    display("Done with animation");
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});

<div id="one">I'm one</div>
<div id="two">I'm two</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>