因为我添加了一些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()
也会被第二次调用。一旦第一次完成,.show()
就会被重复。顺便说一句,将scrollTop动画速度设置为0
并没有什么帮助!
我认为这与动画队列有关,但我不知道如何找到解决方法,尤其是为什么会发生这种情况。
发布于 2012-01-09 23:53:42
要获得完成多个元素动画的单个回调,请使用延迟对象。
$(".myClass").animate({
marginLeft: "30em"
}).promise().done(function(){
alert("Done animating");
});
当您在集合上调用.animate
时,集合中的每个元素都是单独的动画。当每一个操作完成后,就会调用回调函数。这意味着,如果您动画八个元素,您将得到八个回调。相反,当这八个元素上的所有动画都完成时,.promise().done(...)
解决方案会为您提供一个回调。这确实有一个副作用,因为如果在这八个元素中的任何一个上发生了任何其他动画,回调将不会发生,直到这些动画也完成了。
有关Promise和Deferred Objects的详细说明,请参阅jQuery接口。
https://stackoverflow.com/questions/8790752
复制相似问题