Question

This is my code:

$(function(){
  $("#deals ul li ul").hover(function(){
     $(this).stop().find(".trans").fadeIn("fast");
     $(this).stop().find(".text").fadeIn("fast");
     return false;
  },function(){
    $(this).find(".trans").fadeOut("fast");
    $(this).find(".text").fadeOut("fast");
  });
  return false;
});

When you hover a few times quickly it will load those actions per second and stop() should make it stop but it doesn’t work here, any thoughts would be appreciated.

Answer 1

The .stop() needs to be on the element that is potentially animated.

Your ul is not receiving the animation, so it doesn’t do any good to .stop() it. It’s the .trans and .text elements that are animated.

$(function(){
  $("#deals ul li ul").hover(function(){
     $(this).find(".trans").stop().fadeIn("fast");
     $(this).find(".text").stop().fadeIn("fast");
     return false;
  },function(){
    $(this).find(".trans").fadeOut("fast");
    $(this).find(".text").fadeOut("fast");
  });
  return false;
});