.animate（）的回调被两次调用

由于添加了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()get 的印象。在.show()得到尽快，因为它已经完成了第一次重复。0顺便说一下，将scrollTop动画速度设置为并没有帮助！

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

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

如果提供的start，step，progress，complete，done，fail，和always回调称为对每个元素的基础上 ...

由于您要对两个元素（html元素和body元素）设置动画，因此您将获得两个回调。（对于任何想知道OP为什么要动画两个元素的人来说，这是因为动画可以body在某些浏览器上工作，但html在其他浏览器上工作。）

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

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

（请注意：凯文B 在第一次提出问题时就在他的回答中指出了这一点。直到4年后我才发现它不见了，然后才添加了，然后才看到凯文的回答。请在我认为这是可以接受的答案，我应该留在里面。）

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

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>

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

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

有关Promise和Deferred对象的详细说明，请参见jQuery API 。