0

私は6つのオプションを持つメニューを持っています.それらのそれぞれは、いくつかのテキストで他の場所にdivを表示することになっています. このメニューに jQuery 関数を追加しました。任意のオプションをクリックすると、正しい div が下にスライドし、他の div が再び上にスライドします。

問題は、誰かがさまざまなアイテムを非常に速くクリックすると、同時に複数の div が開くことです。div のロード/アンロード中に機能を無効にするなど、これを制御するにはどうすればよいですか?

これは単純な HTML であり、PHP ページはありません。

4

2 に答える 2

2

animate()を使用している、または使用していると仮定すると、アニメーションを終了するためにqueue()使用できます。stop()

あなたのコードや HTML を見なくても、私が提供できる限りの助けになります。

考えられる例:

<ul class="my-collapsible-content">
  <li>Some text</li>
  <li>Some other text</li>
  <li>Some more text</li>
</ul>


$('.my-collapsible-content').on('click', '>li', function(){
    $(this).siblings().stop(true, true); //stops animation and jumps to 'final' state immediately
    $(this).animate(.....);
})
于 2013-01-30T20:20:43.273 に答える
1

http://api.jquery.com/animated-selector/をチェックアウトして、何かがアニメーション化されているかどうかを確認し、アニメーション化されている場合は戻ります。

例：

$("#clickme").click(function(){
    if ($(".slider:animated")) return;
    //DO YOUR ANIMATION CODE
});

「var animating」などのグローバル変数を追加することもできます。アニメーションを開始するときに true に設定します。アニメーションが完了したら false に戻します。

次に、クリック関数でクリックのみを許可します if(animation == false)

var animating;

$('#clickme').click(function() {
    if(!animating){
        animating = true;
        $('#book').animate({
            opacity: 0.25,
            left: '+=50',
            height: 'toggle'
        }, 5000, function() {
            // Animation complete.
            animating = false;
        });
    }
});
于 2013-01-30T20:25:17.443 に答える