问题描述
由于我添加了一些 scrollTop 动画，因此回调的某些部分会被调用两次:
Since I added some scrollTop-animation, some parts of my callback get called twice:
$('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 并没有帮助！
It only seems to repeat the .show(), at least I don't have the impression that the load() or the .fadeIn() get called a second time too. The .show() gets repeated as soon as it has finished for the first time. Setting the scrollTop animation-speed to 0 didn't help by the way!
我认为它与动画队列有关，但我不知道如何找到解决方法，尤其是为什么会发生这种情况.
I assume it has something to do with the animation-queue, but I can't figure out how to find a workaround and especially why this is happening.
推荐答案
animate 为您调用 animate 的集合中的每个元素 调用一次回调:
animate calls its callback once for each element in the set you call animate on:
如果提供，start、step、progress、complete、done、fail 和 always 回调在 每个元素的基础...
由于您正在为两个元素(html 元素和 body 元素)设置动画，因此您将获得两个回调.(对于任何想知道为什么 OP 对两个元素进行动画处理的人，这是因为动画在某些浏览器上对 body 起作用，但在 html 上起作用其他浏览器.)
Since you're animating two elements (the html element, and the body element), you're getting two callbacks. (For anyone wondering why the OP is animating two elements, it's because the animation works on body on some browsers but on html on other browsers.)
要在动画完成时获得单个回调，animate 文档指出使用 promise 方法获取动画队列的承诺，然后使用 then 将回调排队:
To get a single callback when the animation is complete, the animate docs point you at using the promise method to get a promise for the animation queue, then using then to queue the callback:
$("html, body").animate(/*...*/)
.promise().then(function() {
// Animation complete
});
(注意:Kevin B 在第一次提出问题时在他的回答中指出了这一点.我没有直到四年后，当我注意到它不见了，添加了它，然后......然后看到了凯文的回答.请给予他应有的爱.我想这是公认的答案，我应该把它留在里面.)
(Note: Kevin B pointed this out in his answer when the question was first asked. I didn't until four years later when I noticed it was missing, added it, and...then saw Kevin's answer. Please give his answer the love it deserves. I figured as this is the accepted answer, I should leave it in.)
这是一个显示单个元素回调和整体完成回调的示例:
Here's an example showing both the individual element callbacks, and the overall completion 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>这篇关于.animate() 的回调被调用两次 jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！