3

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 に渡さないようにする方法はありますか? (調べてみましたが思いつきませんでした)

ありがとう！

4

1 に答える 1