如何在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对象。 请避免编写新的插件:-)
你有几个选择：
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队列交互，因此如果您希望它成为定时队列的一部分，则必须以某种方式在回调中使用它。
虽然它不是很优雅，但它是实现你想要的东西的方法，试试这段代码：
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)
您可以在此处找到有关代理的更多信