jquery-avoidダブルクリック

Question

私は簡単なアニメーションを持っていますが、もう一度クリックする前にアニメーションを終了したいのですか？

$(".next").click(function() { 

$('#result').animate({ 
    left: '-=250', 
    }, 1000, function() { 
    pos = $('#result').position(); 

    if (pos.left <= -550) { 
$('.next').hide(); 
    } 
    if (pos.left <= -250) { 
    $('.prev').show(); 
    } 
}); 

Answer 1

答えは簡単です。.data()メソッドを使用して、アイテムにクリック可能なフラグを設定します。完全な機能で再び有効にすることができます。 jQuery.comから

：.data() Documentation

.DATA（）メソッドは、私たちは、メモリリークから循環参照したがってより安全な方法の要素をDOMに任意のタイプのデータを添付することを可能にします。

我々は、単一の要素のいくつかの個別の値を設定し、後でそれらを取得することができます。

すでにあなたの次/前のボタンを表示/非表示に使用しているアニメーションの完全方法を（使用、我々は、ボタンがクリックされるように再度有効にすることができます。私たちはbtnに$(this)はそれが完全機能の閉鎖からアクセスすることができます保存

注意を。

$(".next").click(function() { 
    var btn = $(this); 
    if (btn.data('running')) 
    return; 

    btn.data('running', true); 

    $('#result').animate({ 
    left: '-=250', 
    }, 1000, function() { 
     pos = $('#result').position(); 

     if (pos.left <= -550) { 
     $('.next').hide(); 
     } 
     if (pos.left <= -250) { 
     $('.prev').show(); 
     } 

     // Unset it here, this lets the button be clickable again 
     btn.data('running', false); 
    } 
    ); 
}); 

Answer 2

クリック上のボタンを無効にして、使用することは、同じ期間の後に、それを有効にする「のSetTimeout」機能を使用しています。

$(".next").click(function() { 

    $(this).enabled = false; 
    setTimeout('enableButtons()', 250);  } 

    $('#result').animate({ 
     left: '-=250', 
    }, 1000, function() { 
    pos = $('#result').position(); 

    if (pos.left <= -550) { 
$('.next').hide(); 
    } 
    if (pos.left <= -250) { 
    $('.prev').show(); 
    } 
}); 

function enableButtons() { 
    $(".next").enabled = true; 
} 

Answer 3

アニメーションが自動的に再animate開始前に終了するようにあなたがそれを行うことができます。

$('#result').stop(true, true).animate({ ... 

Answer 4

をクリック上のボタンを無効にし、それを再度有効に.animate機能の完全な関数呼び出しを使用します。

.animate（プロパティ[、持続時間] [、イージング] [完全な]）

完全アニメーションが完了すると呼び出す関数。