Question

我希望这个盒子像我一样上下移动，但是我不希望人们能够点击它一百万次然后看着它上下移动，因为你可以点击它比它发生的更快。所以我的问题是...... 如何在点击上放置200毫秒的延迟，或者让它在200毫秒内无法点击？

 <html>   

<style>
div { 
position:absolute; 
background-color:#abc; 
left:50px;
width:90px; 
height:90px;
top:100px;
margin:5px; 
}
</style>

<div class="block" id='up' disabled='true'></div>

<script>

$('.block').click(function(){


    if($('.block').attr('id') == 'up'){
        $('.block').animate({'top': '-=50px'}, 200);
        $('.block').attr('id', 'down');
    }else{
        $('.block').animate({'top': '+=50px'}, 200);
        $('.block').attr('id', 'up');
    }
    }
    ); 

</script>
</body>
</html>

Answer 1

在动画上试试.stop：

http://jsfiddle.net/QwwUD/1/

$('.block').click(function() {

    var btn = $('.block');
    btn.prop('disabled', true);
    window.setTimeout(function() {
        btn.prop('disabled', false);
    }, 600);

    if ($('.block').attr('id') == 'up') {
        $('.block').stop(true,true).animate({
            'top': '-=50px'
        }, 200);
        $('.block').attr('id', 'down');
    } else {
        $('.block').stop(true,true).animate({
            'top': '+=50px'
        }, 200);
        $('.block').attr('id', 'up');
    }
});

Answer 2

如果点击事件当前正在使用以下设置动画，则可以停止：

$('.block').click(function(){
    if ( $(this).is(":animated") ) return false;
    ... rest of your code ...
});

但我更喜欢按照Esailija的建议停止动画。

使<div>无法点击200毫秒</div>

2 个答案: