CODEWITHSUNDEEP
javascriptjqueryeventsjquery-animateeffect
Tony Bogdanov
Tony Bogdanov

Reputation: 7686

jQuery: Prevent stacking animations

I know there are several other posts with solutions to this, but my current problem is a little different.

I have two events on an element - mouseenter and mouseleave. The first changed the color of my element to light and the other back to dark, this makes a flashing effect.

The problem is when I go in and out a couple of times the events stack and it flashes many times even if no new events are triggered. I would like to prevent that, but .stop() does not help.

Here's the catch: I would like to trigger 1 flash no matter what, but not more than 1. So when someone moves in / out - the event mouseenter will be fired, after it mouseleave and after it nothing.. until another in / out is triggered.

I guess this could be made by locking (not listening for) new events when in / out is triggered up until the effect has finished, but I don't know how to do without unbinding and binding it again. Isn't there any lockEvent() or something?

Upvotes: 0

Views: 335

Answers (3)

lia ant
lia ant

Reputation: 408

there is pseudo-class in jQuery ":animated" you can use it on first mouseenter even like:

if ( $(this).is(':animated')) {
     return false;
}

to prevent additional animation

Upvotes: 1

Kai Qing
Kai Qing

Reputation: 18833

You can try just setting a bool var and firing only if false...

var anim = {
    animating: false,
    over: function(){
        if(!anim.animating)
        {
            anim.animating = true;
            // do you animation here
            // and set your animating bool to false before calling outro...
            $('#elem').animate({/*some css change*/ }, 1000, function(){
                anim.animating = false;
                anim.out();
            });
        }
    },
    out: function(){
        if(!anim.animating)
        {
            anim.animating = true;
            //do your outro animation here
            $('#elem').animate({/*some css change*/ }, 1000, function(){
                anim.animating = false;
            });
        }
    }
};

then have your listener call anim.over and anim.out...

$('#elem').on('mouseenter', function(){
    anim.over();
}).on('mouseleave', function(){
    anim.out();
});

This way you will call animation on enter and it will automatically fire off the outro animation when the intro completes.

Upvotes: 0

kinakuta
kinakuta

Reputation: 9037

Have you already used .stop(true) or .stop(true, true)?

Upvotes: 1

Related Questions