Stop() isn't preventing my animation from quing up and I'm not sure why

JavaScript
1

I’m new to JQuery and basically I know enough to get into trouble but not to get out of it. :eek: Here I know that stop() should stop an item from queing an animation, but maybe I have it in the wrong place. Not sure.


$('.image').hover(
    function(){ $(this).stop().find('.up').fadeOut().end().find('.over').fadeIn();},
    function(){ $(this).stop().find('.over').fadeOut().end().find('.up').fadeIn();}
);

The code involves a simple image swap. In the HTML there are two images and in the CSS, one image is set to display:none. This bit of JQuery fades in the hidden image on a hover event. The problem is that even with the stop command, if the user runs their mouse over it a number of times, the animation will keep queing up over and over again, making the effect look broken. :frowning:

I also tried {queue: false} and that didn’t seem to work either. If anybody has any ideas about why this isn’t working, I’d love to hear them.

2

The stop command applies to the element on which it is called.
You’ll have to apply stop() to the ‘up’ or ‘over’ elements instead, since those are the elements that are actually being animated.

3

Thanks, I guess I’m going to have to re-think this because putting stop in those positions is making it act very odd. the icons end up disappearing completely after the third or fourth hover. I just don’t get this stuff.