如何在jQuery调用序列中等待效果队列完成 [英] How to wait for effect queue to complete in jQuery call sequence

问题描述

我正在寻找一些功能：

• 能够等待队列中的所有效果完成


• 可以在经典的jQuery调用序列中使用

示例：

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

I want to do some animations and then some operations after they finish:

$('.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
...

我想避免 完成回调动画功能，因为你必须再次在其中调用jquery，它不是很优雅并打破链：

I want to avoid the complete callback of the animate function since you have to call jquery again inside it, it is not very elegant and breaks the chain:

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

我讨厌这个解决方案。

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

I tried to use .promise() but this breaks the chain too as it apparently doesn't return the proper jQuery object. And please avoid writing new plugin :-)

推荐答案

您有几个选择：

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

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

The queue callback will be called once per element in the collection when each of them have reached this function in the queue. This means that the queue callback will be called multiple times, and possibly at different times if the items have differing animations.

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

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

The done callback will be called once after all elements in the collection have emptied their queues completely. This is useful if you have a bunch of animations happening and you want to trigger something to happen when all of them have finished.

//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');

动画 来电：

The complete callback of the animate call:

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

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

When the specific animation on this specific element has finished, the complete callback will run.

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

由于动画是 fx 的一部分队列和持续时间很短，即时，动画将完成并设置样式。

As the animation is part of the fx queue and the duration is so short as to be immediate, the animation will complete and set the styles.

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

Now, I'm aware that you don't like any of these solutions, but that's too bad because they are the solutions. The css function does not interact with the fx queue, so if you want it to be part of the timed queue, you must use it within a callback in some way.

这篇关于如何在jQuery调用序列中等待效果队列完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！