Javascript 在jquery中编写全局动画队列

使用jQuery向单个dom元素添加一系列动画非常简单。jQuery为我很好地排队，我基本上不需要做任何事情

然而，在许多元素上制作一系列动画（如pictureDiv淡出，然后demographicsDiv淡入）要困难得多。我写了一个插件类型的东西，使它更容易，如下所示：

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？（我试过了，想不出一个）

---

谢谢

由于您正在使用.apply并重新分配

此

，您只需使用

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

var something.createAnimationQueue=函数（）{
//jQuery将每个dom元素（/jQuery对象）上的动画排队
//我们希望在不同的dom元素上排列动画，以便
//在空白元素上使用jquery对象
var animationQueue=$（{}）；
返回{
添加：函数（animationFunctionContext，方法）{//我想你之所以想这么做是因为内置回调太冗长了？@shmiddy是的，只是用回调或承诺链接一些东西是可以的，但是如果你正在做，比如说，20，那么事情很快就会变得糟糕。一个问题是你不能为一些动画调用回调，有办法吗？嗨@Tebb.a你是说“$.when（animationFunction.apply（animationFunctionContext，args））.done（next）”没有像你期望的那样工作吗？如果没有，我恐怕不理解这个问题。我还没有测试过这段代码，但是如果我想在
animationQueue.add（pictureDiv，pictureDiv.fadeOut，'slow'）之间发出警报的话；
和
动画队列.add（demographicsDiv，demographicsDiv.fadeIn，'slow'）；
，我该怎么做？难道不能更进一步，只需传入
“fadeOut”
然后
$.fn[animationFunction].apply…
？@shmiddy是的，我正在写，现在已经发布了。回答得好。我想了$fn。但好像我只是在替换（比如pictureDiv）使用字符串引用jquery原型的属性非常简洁，我很喜欢它，尽管我可能不会实际使用它，以防我想向队列中添加非jquery内容。