3

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

谢谢！

4

1 回答 1

3

由于您正在使用 .apply 和 reassigning 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 等，如果您像最初使用它一样使用它。

于 2012-10-01T14:37:42.820 回答