Question

I stumbled upon this jQuery snippet:

 $(".faded").each(function(i) {
   $(this).delay(i * 400).fadeIn();
 });​

See it in action: http://jsfiddle.net/RExZs/

Anyway I’m trying to turn it into a hover function, so when you hover over a nav-menu button, the div’s fade in with this cool delay effect. And then when the mouse leaves, the div’s should disappear. It’s for a “STORE” button (anchor), so this will be used to display a list of products when they hover it.

So far all I’ve come up with is:

  $(".products").hover(function(){   // I added THIS line
   $(".products-list").hide().each(function(i) { 
   $(this).delay(i * 400).fadeIn();  
    }); 
 });   // and of course, THIS line

The problem is that it starts displaying the div’s as soon as the page loads, LOL.

Now, when I hover the “STORE” button, the effect is perfect, but then when the mouse leaves it starts all over again, reloading those div’s.

Either help me, or tell me where I can go to get over my damn jQuery addiction. 🙂

Thank you!

Answer 1

You need separate behaviour for mouse-in and mouse-out.

You also need to stop any existing animations when you toggle, with the extra true parameters telling it to empty the animation queue and jump to the end of the current animation.

$(".products").hover(function() {
   $(".products-list").stop(true).each(function(i) { 
       $(this).delay(i * 200).fadeIn();  
   }); 
}, function() {
    $(".products-list").stop(true, true).fadeOut();
});

See http://jsfiddle.net/alnitak/tvCBq/ for demo