1

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

这是jsfiddle：http: //jsfiddle.net/QwwUD/4/

 <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>
4

2 回答 2

4

试一下.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');
    }
});​
于 2012-07-16T19:39:16.440 回答
2

如果当前正在使用动画，您可以停止单击事件：

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

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

于 2012-07-16T19:45:25.820 回答