JQuery hover effect problem

Question

I have created a simple JQuery script with hovering effect on some links. The script works fine as you can see here : Test Sample ... (Please test it on any browser other than IE)

But if i hover fast on the links, you will notice the image icons do not disappear as required. I have tried everything to fix this but i can't find a suitable solution.

The question now: How can i be sure the mouseOut hover effect is applied after the mouseOver hover effect is completely done ?

Answer 1

You need to apply the stop() to the elements that have been animated. Try this:

function hide_frame() {
   var hoveredLang = $(this).parent();              
   hoveredLang
      .find('.language-name').stop(true, true)
      .find('.download-img').stop(true, true)
      .find('.info-img').stop(true, true);
   //eccetera...

Answer 2

Becuase your animation effect has a duration to completion, you need to handle cases where hover/unhover happen during the animation.

I use JQuery's stop function (http://docs.jquery.com/Effects/stop)

Eg.

$("selector").stop(true,true).youreffect(.....);

Give it a try.