在 jquery 中编写一个全局动画队列答案

【问题标题】：Writing a global animation queue in jquery在 jquery 中编写一个全局动画队列
【发布时间】：2012-09-22 10:05:10
【问题描述】：

使用 jQuery 向单个 dom 元素添加一系列动画非常简单。 jQuery 为我排好队，我基本上什么都不用做。

但是，在多个元素上制作一系列动画（例如，pictureDiv 淡出，然后人口统计Div 淡入）要困难得多。我写了一个插件类型的东西来使它更容易，如下所示：

var something.createAnimationQueue = function () {

    // jQuery queues up animations on each dom element (/ jquery object)
    // We want to queue up animations over different dom elements so 
    // use a jquery object on a blank element
    var animationQueue = $({});

    return {
        add: function (animationFunctionContext, animationFunction) {
            var args = $.makeArray(arguments).slice(2);
            animationQueue.queue(function (next) {
                $.when(animationFunction.apply(animationFunctionContext, args)).done(next)
            })
        }
    }
}

这样用的

        var animationQueue = something.createAnimationQueue();

        animationQueue.add(pictureDiv, pictureDiv.fadeOut, 'slow');
        animationQueue.add(demographicsDiv, demographicsDiv.fadeIn, 'slow');

我的问题是：

1) 我错过了什么吗？有没有我不知道的更简单的方法。

2) 如果没有，有没有办法避免将pictureDiv 和pictureDiv.fadeOut 传递给animationQueuer？（我试过了，想不出来）

谢谢！

【问题讨论】：

我假设你想这样做是因为内置的回调太冗长了？
@Shmiddty 是的，只是使用回调或承诺链接一些东西很好，但如果你正在做，比如说，20，那么事情很快就会变得丑陋。
一个问题是你不能为某些动画调用回调，有没有办法做到这一点？
嗨@Tebb。你是说 "$.when(animationFunction.apply(animationFunctionContext, args)).done(next)" 不像你期望的那样工作吗？如果不是，恐怕我不明白这个问题。
我没有测试过这段代码，但是如果我想在animationQueue.add(pictureDiv, pictureDiv.fadeOut, 'slow');和animationQueue.add(demographicsDiv, demographicsDiv.fadeIn, 'slow');之间发出警报，我该怎么做？

标签： javascript jquery animation queue

【解决方案1】：

由于您正在使用 .apply 并重新分配 this，因此您可以简单地使用

var animationQueue = something.createAnimationQueue();

animationQueue.add(pictureDiv, $.fn.fadeOut, 'slow');
animationQueue.add(demographicsDiv, $.fn.fadeIn, 'slow');

如果你真的想，你可以把它变成一个字符串：

var something.createAnimationQueue = function () {

    // jQuery queues up animations on each dom element (/ jquery object)
    // We want to queue up animations over different dom elements so 
    // use a jquery object on a blank element
    var animationQueue = $({});

    return {
        add: function (animationFunctionContext, method) { // <----
            var args = $.makeArray(arguments).slice(2);
            animationQueue.queue(function (next) {
                $.when($.fn[method].apply(animationFunctionContext, args)).done(next) // <----
            })
        }
    }
}

var animationQueue = something.createAnimationQueue();

animationQueue.add(pictureDiv, 'fadeOut', 'slow'); // <----
animationQueue.add(demographicsDiv, 'fadeIn', 'slow'); // <----

但是，请注意，现在这只能用于动画。您可以将它与任何返回 promise 对象的 jQuery 方法一起使用，例如 .ajax、.post、.get、.getJSON 等，如果您像原来一样使用它。

【讨论】：

通过"fadeOut" 然后$.fn[animationFunction].apply... 不能更进一步吗？
@Shmiddty 是的，我正在写它，现在发布了。
好答案。我想到了 $.fn。但似乎我只是用别的东西代替（比如pictureDiv），我对此并不那么兴奋。使用字符串引用 jquery 原型的属性非常简洁，我喜欢它，虽然我可能不会真正使用它，以防我想将非 jquery 的东西添加到队列中。