Как остановить повторные появления скользящих вверх и вниз

Question

У меня есть функция, которая показывает форму, когда вы нажимаете на флажок, и скрывает ее, когда вы снимаете флажок. Проблема в том, что если кто-то нажимает быстро несколько раз на флажке, то он просто перемещается вверх и вниз, пока итерации не закончатся.

Я уже пробовал использовать stop (true, true), и да, это исправить, но это также разрушило поток скольжения.

Таким образом, поток по-прежнему должен работать так, как сейчас.

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

У меня он работает здесь

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

Вы можете установить флаг, указывающие, что анимация в настоящее время работает:

// 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(); 
      }); 
     } 
    } 
}); 

Надеется, что это помогает.