我开始用jQuery制作一个相当复杂的动画,我正在寻找一种将元素一起制作动画的特定方法。我写的代码如下,可以用来将多个元素动画化:
小提琴在这儿:http://jsfiddle.net/wkhrU/
$(document).ready(function(){
$('#firstElement, #secondElement').animate(
{left : '+=400px'},
500,
"linear",
function(){
alert("completed");
});
});
但是,回调函数会触发两次,即每次都为内部元素触发。我想要的是在相同的持续时间内同时为多个元素设置动画,完成后,发出一个调用,我想在其中交换元素的id
属性。我不能在这里做同样的事情,因为在完成回调时,它会交换id
s一次,在下一个函数回调时,会再次交换它们。实现这一目标的适当方式是什么?
解决方案
您可以使用promise()
来调用要执行的函数,而不是animate
的内置回调。这样可以确保done
中的函数在为两个元素设置动画后仅调用这基本上就像你在问#firstElement
&#secondElement
向JS承诺,当这两个'em都完成时,它会通知,以便您可以将done
处理程序附加到它。
$(document).ready(function () {
$('#firstElement, #secondElement').animate({
left: '+=400px'
},
500, "linear").promise().done(function () {
alert("completed");
});
});
演示
http://jsfiddle.net/hungerpain/wkhrU/1/
有关使用方法的更多信息:
promise
- 文档:http://api.jquery.com/promise/
- 它的作用:确保绑定到集合的特定类型的所有操作(无论是否排队)都已完成
done
- 文档:http://api.jquery.com/deferred.done/
- 它的作用:添加在promise被解析时要调用的处理程序