.animate（）的callback调用两次jquery

由于我添加了一些scrollTopanimation，我的callback的一些部分被调用两次：

 $('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() ，至less我没有这样的load()或.fadeIn()第二次调用的印象。 .show()会在第一次完成时重复。 设置scrollTopanimation速度为0没有帮助的方式！

我认为它与animation队列有关，但我无法弄清楚如何find解决办法，特别是为什么会发生这种情况。

Answer 1

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

如果提供， 每个元素的基础上调用start ， step ， progress ， complete ， done ， fail和alwayscallback。

由于您正在为两个元素（ html元素和body元素）设置animation，因此您将获得两个callback。 （对于任何人想知道为什么OP是animation两个元素，这是因为animation在一些浏览器上的body上工作，而在其他浏览器上的html上）。

为了在animation完成时获得单个callback， animate文档指出使用promise方法获取animation队列的承诺，然后使用这个承诺排队callback：

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

（注意：Kevin B 在第一个问题的答案中就指出了这个问题，直到四年后，当我注意到这个问题时，我才注意到这个问题，补充说，然后……看到Kevin的回答。爱它值得，我认为这是被接受的答案，我应该留下。）

以下是一个显示个别元素callback和整体callback的示例：

 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> 

Answer 2

要获得多个元素animation完成的单个callback，请使用延迟对象。

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

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