Search code examples
jqueryfadeskip

jQuery quickly switch fadeIn/ fadeOut even when not complete

Possible Duplicate:
jQuery: interrupting fadeIn()/fadeOut()

the fade effects in jQuery are really smooth, there's only one problem I've seen: When you hover over the item, it will fade in, now if you quickly hover out of the item to activate the fade out, the fadeOut effect will wait until fadeIn is complete, which can look odd.

Is it possible that the fadeIn effect can be stopped at whatever value it is once you activate hover out so it immediately does fadeOut?

Here's my code

$(document).ready(function () {

$("#menu").hover(
   function() {
     $("#fade").fadeIn(300);
   },
   function() {
     $("#fade").fadeOut(300);
   }
);


});
Solution

  • Tell jQuery to stop the current animation before starting the new one:

    $("#menu").hover(
   function() {
     $("#fade").stop().fadeIn(300);
   },
   function() {
     $("#fade").stop().fadeOut(300);
   }
);