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

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

$('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并不会有帮助！

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

---

animate为您调用animate每个元素调用一次回调animate ：

如果提供，每个元素always调用start ， step ， progress ， complete ， done ， fail和always回调。

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

为了得到一个回调动画完成后，该animate文件指向您在使用promise的方法来获得动画队列中的承诺，然后用then排队回调：

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

（注意：凯文B在第一次提问时在他的回答中指出了这一点，直到四年后，当我注意到它缺失时，补充了它，然后......然后看到凯文的回答。爱它值得，我认为这是公认的答案，我应该留下它。）

以下是一个显示个别元素回调和整体完成回调的示例：

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 Objects的详细说明，请参阅jQuery API。

链接地址: http://www.djcxy.com/p/3943.html

上一篇: Callback of .animate() gets called twice jquery

下一篇: How come $('html').animate() only works in IE and $('body').animate() is needed for Chrome/Safari?