.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解决办法,特别是为什么会发生这种情况。

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

如果提供, 每个元素的基础上调用startstepprogresscompletedonefailalwayscallback。

由于您正在为两个元素( 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> 

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

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

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