views:

15

answers:

1

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.

+1  A: 

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/

Robert