Question

I’ve got the following problem:

I have a set of LI elements that have to go from one state to another (two separate css classes) with a smooth transition. To do this, I’m using JQueryUI’s Effect API (switchClass)

for every LI element, I’ve hooked two JQuery listeners: mouseover and mouseout, which change the state correspondingly. Clear enough. Now, I’m not of a JQuery expert, so I must be missing something pretty standard, but every time when I move the mouse out of the LI element BEFORE the transition has finished, the transition just kinda hangs midway, and the LI elem becomes irresponsive to further listening.

Please, help.

Answer 1

You can use .stop([clear queue],[jump to end]) to end the animation before the next one is called. Substitute true/false based on if you want to do that in your stop statement. Add it before the call, ie $('element').stop(true,true).animate({....

http://api.jquery.com/stop/