I need to make this box move up and down, but prevent users from clicking it rapidly multiple times to watch it go up and down too quickly. How can I add a 200 millisecond delay on the click or disable clicking for that duration?
View the jsfiddle example here: 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>