写在jQuery的一个全球动漫队列 [英] Writing a global animation queue in jquery

问题描述

添加动画序列来使用jQuery一个DOM元素是非常容易的。 jQuery的排队一切行动很好地为我和我基本上没有做任何事情。

Adding a sequence of animations to a single dom element using jQuery is extremely easy. jQuery queues everything up nicely for me and I basically don't have to do anything.

然而在许多元素制作动画的序列（如pictureDiv淡出，然后demographicsDiv淡入）更难。我写了一个插件类型的事情，使其更容易如下：

However making a sequence of animations over a number of elements (eg pictureDiv fades out, then demographicsDiv fades in) is much harder. I've written a plugin type thing to make it easier as below:

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)
            })
        }
    }
}

这是用来正是如此。

Which is used thusly

        var animationQueue = something.createAnimationQueue();

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

我的问题是：

1）我错过了什么？是否有这样做的一个简单的方法，我不知道。

1) Have I missed something? Is there an easier way of doing this that I didn't know about.

2）如果没有，有没有办法避免将pictureDiv和pictureDiv.fadeOut的animationQueuer？ （我想，不能想一）

2) If not, is there a way to avoid passing pictureDiv and pictureDiv.fadeOut to the animationQueuer? (I tried and couldn't think of one)

谢谢！

推荐答案

由于您使用的。适用和重新分配这个，你可以简单地使用

Since you are using .apply and reassigning this, you could simply use

var animationQueue = something.createAnimationQueue();

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

如果你真的想，你可以把它转换成字符串：

And if you really wanted to, you could turn that into a string:

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

请注意，但是，这不能被用于不仅仅是现在的动画。你可以用它返回一个承诺的对象，如阿贾克斯，.POST，不用彷徨，.getJSON等，如果你使用像你原来有任何的jQuery方法使用。

Note, however, this can't be used for more than just animations now. You could use this with any jQuery method that returns a promise object, such as .ajax, .post, .get, .getJSON, etc. if you used it like you originally had it.

这篇关于写在jQuery的一个全球动漫队列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！