1

アニメーションを作成するための一連の画像があります。これは以下のコーディングを使用して機能しますが、新しいアニメーションを開始するときに複数回クリックするとアニメーションが台無しになるという一般的な問題があります。

アニメーションの実行中、または同様の効果でクリックを無効にできる必要があります。アニメーションが終了するまでクリックを無効にするか、アニメーションをリセットして再開し、現在実行中のシーケンスをクリアすることができます。

現在、次のコードがあります。

$(".startbutton").click( function() {
$(this).clearQueue( function() {

$(this).find("ul li:nth-child(1)").delay(124).animate({opacity: 0.0}, 0).delay(1860).animate({opacity: 1.0}, 0);
$(this).find("ul li:nth-child(2)").delay(124).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(3)").delay(248).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(4)").delay(372).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(5)").delay(496).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(6)").delay(620).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(7)").delay(744).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(8)").delay(868).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(9)").delay(992).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(10)").delay(1116).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(11)").delay(1240).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(12)").delay(1364).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(13)").delay(1488).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(14)").delay(1612).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(15)").delay(1736).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(16)").delay(1860).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(17)").animate({opacity: 0.0}, 0).delay(1984).animate({opacity: 1.0}, 0);

 });
});

.clearQueueアニメーションを複数回クリックして台無しにすることができなくなったという点で、私が挿入した作品。ただし、アニメーション シーケンスが終了すると、アニメーションはクリックできなくなり、2 回目は実行されません。

「clearQueue」などを「クリア」する必要があると思います。

誰かが何か提案があれば、それをいただければ幸いです。賢明な解決策と思われる他の同様の投稿で人々が提案した「:animated」ソリューションを使用してみましたが、これまでのところ問題は解決していません。

4

3 に答える 3

1

一般的なコードのアドバイス:同じ形式のアクションを繰り返すためのforループがあります。以下に示すように、コードはより短く、よりクリーンになります。あなたのトピックに関して.clearQueueは、コールバック関数をパラメーターとして取りません。アニメーションを開始する前に呼び出すだけです。.stop効果を試して、気に入ったものを確認することもできます。

$(".startbutton").click( function() {
    // $(this).clearQueue();  <- Correct usage, but unnecessary with .stop()
    $(this).stop(true, true);

    var $lis = $(this).find("ul li");
    $lis.stop(true, true);

    $lis.filter(":nth-child(1)")//.delay(124) <- Unnecessary delay here?
        .animate({opacity: 0.0}, 0).delay(1860).animate({opacity: 1.0}, 0);

    for ( var i=1; i< 16; i++ ) {
        $lis.filter(":nth-child(" + i+1 + ")")
            .delay( i * 124)
            .animate( {opacity: 1.0}, 0 )
            .delay( 125 )
            .animate({opacity: 0.0}, 0);
    }

    $lis.filter(":nth-child(17)")
        .animate({opacity: 0.0}, 0).delay(1984).animate({opacity: 1.0}, 0);
});​
于 2013-01-02T01:04:30.660 に答える
1

OPがサンプルコードを提供したので、それに応じてこの回答を作り直します。

作業バージョンは次のとおりです。

http://jsfiddle.net/qZGMW/

まず、私の最初の提案に従ってフラグを使用します。

var started = false;
$(selector).click(function() {
    if (started) { return; }
    started = true;
    $(this).stop(); // Do not use clearQueue
    // Do animation normally
    $(lastOne).animate(param, param, function() { started = false; });
});
于 2013-01-02T00:29:05.463 に答える
0

このクエリ APIを見て、デフォルト アクションが発生しないようにしてください。

以下のコードスニペットを試してみてください..

$(".startbutton").click( function(e) {
   e.preventDefault();
   $(this).clearQueue( function() {
   your code continues...
于 2013-01-02T00:34:18.800 に答える