CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Skovy
Skovy

Reputation: 173

Make <div> unclickable for 200 milliseconds

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>

Upvotes: 1

Views: 838

Answers (2)

Kevin B
Kevin B

Reputation: 95022

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.

Upvotes: 2

Esailija
Esailija

Reputation: 140230

Try .stop on the animation:

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');
    }
});​

Upvotes: 4

Related Questions