Question

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?

Answer 1

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