如何停止重复上下滑动

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

您可以设置一个标志来指示动画当前运行:

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

希望对您有所帮助。

Answer 2

这个应该更好：

$('#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/

如何停止重复上下滑动

How to stop repeat occurences of sliding up and down

jquery

slideup