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

Question

我正在寻找一些功能:

• 能够等待队列中的所有效果完成
• 可以在经典的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
...

我想避免completeanimate函数的回调,因为你必须再次在其中调用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回调将每个元素一旦集合中时,他们每个人都达到了队列这个函数被调用.这意味着将多次调用队列回调,如果项目具有不同的动画,则可能在不同的时间调用.

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队列交互,因此如果您希望它成为定时队列的一部分,则必须以某种方式在回调中使用它.