如何等待效果队列在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)
你可以在这里找到更多关于代理
链接地址: http://www.djcxy.com/p/94877.html上一篇: How to wait for effect queue to complete in jQuery call sequence