如何在jQuery调用序列中等待效果队列完成

我正在寻找一些function：

• 能够等待队列中的所有效果完成
• 可以在经典的jQuery调用序列中使用

例：

我想做一些动画， 然后在完成后进行一些操作：

$('.obs_list') .delay(500) .animate({ 'background-color' : '#ffcc33' }, 200) .delay(1000) .animate({ 'background-color' : 'transparent' }, 2000) .THE_FUNCTION_I_AM_LOOKING_FOR() .css({ 'color' : 'red' }) // this should come *after* the effects above are finished ... 

我想避免动画函数的complete回调，因为你必须再次在其中调用jquery，它不是很优雅并打破了链：

 ... .animate({ 'background-color' : 'transparent' }, 2000, function () { $(this) .css({ 'color' : 'red' }) ... }); 

我讨厌这个解决方案。

我试图使用.promise()但这也打破了链，因为它显然没有返回正确的jQuery对象。 请避免编写新的插件:-)

Answer 1

你有几个选择：

queue ：

 .animate(...) .queue(function (n) { $(this).css('color', 'red'); n(); }); 

当queue每个元素都已到达队列中的此函数时，将为集合中的每个元素调用一次queue回调。 这意味着将多次调用队列回调，如果项目具有不同的动画，则可能在不同的时间调用。

promise （已done ）：

 .animate(...) .promise() .done(function () { $(this).css('color', 'red'); }); 

在集合中的所有元素完全清空其队列之后，将调用done回调一次。 如果您发生了大量动画，并且想要在所有动画完成时触发某些事情，这将非常有用。

一个自定义的jQuery插件：

 //I wrote this on the fly and it looks like it should work //I haven't tested it, so let me know if there are any bugs $.fn.queuedCSS = function () { var args = Array.prototype.slice.call(arguments); return this.queue(function (n) { $.fn.css.apply($(this), args); n(); }); }; .animate(...) .queuedCSS('color', 'red'); 

animate调用的完整回调：

 .animate(..., function () { $(this).css('color', 'red'); }); 

当此特定元素上的特定动画完成后，将运行完整的回调。

立即执行的动画：

 .animate(...) .animate({'color': 'red'}, 1); 

由于动画是fx队列的一部分，并且持续时间非常短，因此动画将完成并设置样式。

---

现在，我知道你不喜欢任何这些解决方案，但这太糟糕了，因为它们是解决方案。 css函数不与fx队列交互，因此如果您希望它成为定时队列的一部分，则必须以某种方式在回调中使用它。

Answer 2

虽然它不是很优雅，但它是实现你想要的东西的方法，试试这段代码：

 var elements = $('.obs_list'); elements .delay(500) .animate({ 'background-color' : '#ffcc33' //see the use of proxy here to change the scope of callback function }, 200, $.proxy(function(){ this .css({ 'color' : 'red' }); }, elements) 

您可以在此处找到有关代理的更多信