0

現在、テキストを含むカルーセル スライダーがあります。ユーザーが「次へ」ボタンをクリックすると、.carousel-text div が上向きになり、テキストが非表示になり、カルーセルが次のスライドに移動し、次のスライドの .carousel-text が下にスライドしてテキストが表示されます。

これはうまくいく場合もありますが、時々うまくいかず、カルーセルが移動する前にテキストが上下にスライドします。これは、シーケンス全体が終了する前に次のボタンがクリックされたためだと思います (全体に 2 秒かかります)。再度呼び出される前にすべてが完了していることを確認する方法はありますか? 

jQuery("#arrow-right").click(function () {

    jQuery('.carousel-text').animate({  
         marginTop: "-260px"
         }, 500, function() {
            jQuery('.carousel-inner').animate({ 
                marginLeft: "-700px"
                }, 1000, function() {
                    jQuery('.carousel-text').animate({  
                        marginTop: "0px"
                        }, 500, function() {
                            // Animation complete.
                        });         
                });
    });
}

編集: ここで jsfiddle を作成しました: http://jsfiddle.net/UGE44/

4

2 に答える 2

0

アニメートする前に「.stop(true, true)」を配置します。これにより、以前のアニメーションが停止し、新しいアニメーションがすべて同時に開始されます。次のようになります。

jQuery('.carousel-text').stop(true, true).animate({  
         marginTop: "-260px"
         }, 500, function() {
            jQuery('.carousel-inner').stop(true, true).animate({ 
                marginLeft: "-700px"
                }, 1000, function() {
                    jQuery('.carousel-text').stop(true, true).animate({  
                        marginTop: "0px"
                        }, 500, function() {
                            // Animation complete.
                        });         
                });
    });

3 つの場所すべてに配置する必要はないので、前にどのアニメーションを配置するかを試してみるのもよいでしょう。

于 2013-01-10T14:29:17.123 に答える
0

アニメーションの前に「アニメーション」フラグを設定し、アニメーションが終了したらクリアします。

jQuery("#arrow-right").click(function () {

    var $text = jQuery('.carousel-text');

    if ($text.data('animating') !== true) {

        $text.data('animating', true)
             .animate({  
            marginTop: "-260px"
         }, 500, function() {
            jQuery('.carousel-inner').animate({ 
                marginLeft: "-700px"
                }, 1000, function() {
                    jQuery('.carousel-text').animate({  
                        marginTop: "0px"
                        }, 500, function() {
                            $text.data('animating', false);
                            // Animation complete.
                        });         
                });
        });


    }

}
于 2013-01-10T14:31:15.230 に答える