jQuery stop fadein during fadeout

I have this code on my site:

$(".name").hover(
    function() { $(".kyle_hover").stop(true, true).fadeIn('slow'); },
    function() { $(".kyle_hover").stop(true, true).fadeOut('slow'); }
);

But I have about 4 of these on top of each other, they are hidden and appear when hovered and disappear when left 开发者_运维百科as expected, but the .stop method isn't doing what I exepct.

When you hover over the titles quickly, they all stack up on top of each other (as they are built into the HTML) but I want the animation to complete before starting the next one, have I misunderstood stop?

Quick fiddle.

Thanks.

Yes, you seem to have misunderstood it. stop() doesn't clear the queue for all animations, it just stops the animation that's in progress on the exact element it's called on. So, calling $(".kyle_hover").stop() will stop this particular element's animation, but if you hover over $("#gallery"), its animation will be triggered independently.

In your particular case, I'd just position the fading in/out elements absolutely so that they don't stack up one on above another. The fading in/out will look far more pleasing, and your jQuery code won't require any changes.