Make <div> unclickable for 200 milliseconds
Question
I want this box to go up and down just like I have it doing, however I don't want people to be able to click it a million times then watch it go up and down because you can click it much faster than it happens. So my question is... How do I put a 200 millisecond delay on the click, or make it un-clickable for those 200 milliseconds?
Here is the 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>
2 answers
solution1
4 ACCPTED 2012-07-16 19:39:16
Try .stop on the animation:
$('.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');
}
});
solution2
2 2012-07-16 19:45:25
You can stop the click event if it is currently animating using:
$('.block').click(function(){
if ( $(this).is(":animated") ) return false;
... rest of your code ...
});
However I prefer to stop the animation as suggested by Esailija.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.