我开始用 jQuery 制作一个相当复杂的动画,我正在寻找一种将元素组合在一起的动画方式。我编写了如下代码,我可以用它来为多个元素一起制作动画:
这是 fiddle :http://jsfiddle.net/wkhrU/
$(document).ready(function(){
$('#firstElement, #secondElement').animate(
{left : '+=400px'},
500,
"linear",
function(){
alert("completed");
});
});
但是,回调函数会触发两次,即每次针对内部元素。我一直在寻找的是在相同的持续时间内同时为多个元素设置动画,并在完成后触发一个调用,我想在其中交换元素的 id
属性。我不能在这里做同样的事情,因为在完成回调时,它交换一次 id
,在下一个函数回调中,再次交换它们。实现这一目标的合适方法是什么?
最佳答案
解决方案
您可以使用 promise()
来调用要执行的函数,而不是 animate
的内置回调。这确保了 done
中的函数在为两个元素设置动画后仅被调用。 这基本上就像你要求 #firstElement
和 #secondElement
向 JS promise ,当两个都完成时它会通知你,这样你就可以附加一个完成
处理程序。
$(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/
- 它的作用:确保绑定(bind)到集合的特定类型的所有操作,无论是否排队,都已完成。
完成
- 文档:http://api.jquery.com/deferred.done/
- 它的作用:添加处理程序以在解决 promise 时调用。
关于javascript - 为两个对象设置动画时仅触发一次回调,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17376430/