Geek asks and answers

JQuery prevents quick click

I have a problem with my code. I have a .click function and I want to disable it during the animation (to prevent a quick click) inside this function. I checked everything I found on the Internet. Thanks for the 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');

        }       
});
+3
source share
3 answers

You can 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');
    }
});
+8
source

Since you want to prevent this due to 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');

        }  
    }
});
+3
source

: css open closed

#content{
    height:150px;
}

#content.open {
    background: url("http://torm.vot.pl/breitenbach/templates/breitenbachmedia/images/arrows.png");
}

#content.closed {
    background: url("http://torm.vot.pl/breitenbach/templates/breitenbachmedia/images/arrows_down.png");
}

, toggleClass("closed open"), .

, $this.is(":animated"), , jQuery.animate()

, html

<div id="content"
    class="closed">
</div>

css JavaScript:

$(document).on('click', '#content', function() {
    var $this = $(this);

    if(!$this.is(":animated")){
        $this.animate({
                height: $this.hasClass('closed') ? "300px" : "150px"
            },
            500,
            'easeInQuint',
            function() {
                    $this.toggleClass("closed open");
            }
        );
    }
});

.

.

0

More articles:


All Articles