上下スライドの繰り返しを停止する方法

Question

私は、チェックボックスをクリックするとフォームを表示し、ボックスをオフにすると非表示にする機能があります。問題は、チェックボックスで誰かが何度もすばやくクリックした場合、反復が終了するまで上下にスライドし続けることです。

私はすでにstop（true、true）を使ってみましたが、これは修正されましたが、スライディングの流れも破壊されました。

したがって、フローはまだどのように動作している必要がありますか。私はそれはあなたがアニメーションが現在実行されていることを示すフラグを設定することができ、ここで

https://jsfiddle.net/ebwok5rg/1/

Answer 1

これは良好であるべきである。

$('#billing_different').click(function(){ 
    $('#checkout_address_billing').stop(); 
    if($('#billing_different').is(':checked') && $('#checkout_address_billing').is(':hidden')){ 
     $('#checkout_address_billing').slideDown(); 
    } else if(!$('#billing_different').is(':checked') && $('#checkout_address_billing').is(':visible')){ 
     $('#checkout_address_billing').slideUp(); 
    } 
}); 

これは、チェックボックスの状態をチェックし、構成要素は、隠されたまたは示されています。ボタンをクリックすると、最後に必要なアニメーションだけでなく、ユーザーがチェックボックスを何回でもクリックできるようになります。

https://jsfiddle.net/ebwok5rg/3/

Answer 2

を働いてきた

$('#billing_different').click(function(){ 
    if($('#billing_different').is(':checked')) $('#checkout_address_billing').slideDown(); 
    else { 
     $('#checkout_address_billing').slideUp(); 
    } 
}); 

：

// this will be set to true when an animation is running, reset to 
// false when it completes. 
// 
var isanimated = false; 

function resetIsAnimated() { 
    isanimated = false; 
} 

$('#billing_different').click(function() { 
    // Set a call back to set isanimated to false 
    // 
    if($('#billing_different').is(':checked')) { 
     if (isanimated == false) { 
      isanimated = true; 
      $('#checkout_address_billing').slideDown(200, function() { 
       resetIsAnimated(); 
      }); 
     } 
    } 
    else { 
     if (isanimated == false) { 
      isanimated = true; 
      $('#checkout_address_billing').slideUp(200, function() { 
       resetIsAnimated(); 
      }); 
     } 
    } 
}); 

はそれがお役に立てば幸いです。