0

並行して異なる順序で発生する多くのアニメーションを含むスクリプトを作成しています。Web ページでクリックされた内容に応じて、特定のアニメーション セットが使用されます。関数は再利用され、毎回同じ順序になるわけではありません。

この問題は、ユーザーがアニメーションの最初のセットを完了させずに別の要素をクリックしたときに発生します。このタイプのインスタンスでは、スクリプトが壊れて意図したとおりに機能しません。これは明らかに、進行が完了せず、別の一連のアニメーションが実行され始めたためです。

私の質問は、現在のアニメーションのセットが完了する前に別のアニメーションのセットが実行されるのを防ぐために、アニメーションが現在実行されているかどうかを識別する方法があるかどうかです。

4

3 に答える 3

1

:animatedセレクターを使用できます。

if ($("yourSelector:animated").length > 0) {
    // Some of the elements matching 'yourSelector' are still being animated.
}

別の方法として、新しいアニメーションを開始する前にfinish()を呼び出して、現在のアニメーションを強制的にすぐに終了させることもできます。

$("yourElement").finish().animate({
    // The properties to animate...
});
于 2013-03-11T15:57:36.540 に答える
1

新しいアニメーションを開始する前に、特定の要素に関連付けられたアニメーションが正常に完了したことを確認したい場合は、.queue()関数を使用できます。jsFiddle の例を参照してください。

$( function() {
    $(".clicker").on("click", function() {
        var self = $(this);
        self.queue( function(next) {
            self.animate({left:"+=100"}, 1000); // Replace with your animation
            next();
        });
    });
});

api.jquery.com でキュー関数の詳細を参照してください。

于 2013-03-11T16:40:21.817 に答える
0

$.timersjQueryには、現在アニメーション化されているすべてのものの配列を含む、と呼ばれる隠し公開変数もあります。$('*').is(':animated')ページ上の何かが動いているかどうかをテストするために、ループしたくない速度の面で信じられないほど高速で、パフォーマンスの面ではどれですか。

すべてが終了するまで間隔を何度もループし、コールバック関数を実行する小さな関数を作成しました。

function isPageAnimated (_func) {    
    var testAnimationInterval = setInterval(function () {
        if ($.timers.length === 0) { // any page animations finished
            clearInterval(testAnimationInterval);
            _func(); // callback function
        }
    }, 100);
}
于 2013-03-11T17:18:53.520 に答える