jQuery prevent rapid clicking

Question

i've got an issue with my code. I've got a .click function, and i want to disable it during the animation (to prevent rapid clicking) inside that function. I've tested everything i found in internet. Thanks for help!

$('#content').click(function() {

    if($('#content').hasClass('closed')){
            $('#content').animate({
            height: '300px',
            }, 1000, 'easeInQuint', function() {
            $('#content').css("background-image", "url(http://torm.vot.pl/breitenbach/templates/breitenbachmedia/images/arrows_down.png)");
            });
            $('#content').removeClass('closed');
            $('#content').addClass('open');
        } 



    else {
            $('#content').animate({
            height: '150px',
            }, 1000, 'easeInQuint', function() {
            $('#content').css("background-image", "url(http://torm.vot.pl/breitenbach/templates/breitenbachmedia/images/arrows.png)");

            });
            $('#content').removeClass('open');
            $('#content').addClass('closed');

        }       
});

Answer 1

You could try using a flag like this:

var stopClick = false;
$('#content').click(function () {
    if(stopClick) return;
    stopClick = true;
    if ($('#content').hasClass('closed')) {
        $('#content').animate({
            height: '300px',
        }, 1000, 'easeInQuint', function () {
            $('#content').css("background-image", "url(http://torm.vot.pl/breitenbach/templates/breitenbachmedia/images/arrows_down.png)");
            stopClick = false;
        });
        $('#content').removeClass('closed');
        $('#content').addClass('open');
    } else {
        $('#content').animate({
            height: '150px',
        }, 1000, 'easeInQuint', function () {
            $('#content').css("background-image", "url(http://torm.vot.pl/breitenbach/templates/breitenbachmedia/images/arrows.png)");
            stopClick = false;
        });
        $('#content').removeClass('open');
        $('#content').addClass('closed');
    }
});

Answer 2

Since you want to prevent this because of the animation, you can use .is(':animated'):

$('#content').click(function() {
    if(!$('#content').is(':animated')){ // If the element is not animate, do something.
        if($('#content').hasClass('closed')){
            $('#content').animate({
                height: '300px',
            }, 1000, 'easeInQuint', function() {
                $('#content').css("background-image", "url(http://torm.vot.pl/breitenbach/templates/breitenbachmedia/images/arrows_down.png)");
            });
            $('#content').removeClass('closed');
            $('#content').addClass('open');
        } 



        else {
            $('#content').animate({
                height: '150px',
            }, 1000, 'easeInQuint', function() {
                $('#content').css("background-image", "url(http://torm.vot.pl/breitenbach/templates/breitenbachmedia/images/arrows.png)");

            });
            $('#content').removeClass('open');
            $('#content').addClass('closed');

        }  
    }
});