Jquery Stop Fadein / Fadeout

Question

This is a fairly easy one, but I cant seem to figure it out.

Basically I have a jquery hover that fades in a div and fades out the other upon hover.

When I quickly hover on and off a few times it pulses back and forth for about 3-4 seconds to finish all those fade in/fade outs.

I generally stop these things with .stop(), but it doesnt seem to do the trick here. How can I kill the fade in if I hover off the button before the an`$(".txtWrap").stop().hover(

$(".txtWrap").stop().hover(   function () {     $(this).find('.txtBock').fadeOut();     $(this).find('.txtDesc').fadeIn();    },   function () {     $(this).find('.txtBock').fadeIn();     $(this).find('.txtDesc').fadeOut();   } ) 

Answer 1

Your stop() is misplaced.

Try this:

$(".txtWrap").hover(   function () {     $(this).find('.txtBock').stop().fadeOut();     $(this).find('.txtDesc').fadeIn();   //  $('#timeTxt').fadeOut();   //  $('#timeTxtDesc').fadeIn();    },   function () {     $(this).find('.txtBock').fadeIn();     $(this).find('.txtDesc').stop().fadeOut();   } ) 

---

EDIT:

This will animate the elements' opacity without hiding the element. If you want them hidden, use .hide() you'll need to add a callback to the animate function.

$(".txtWrap").hover(   function () {     $(this).find('.txtBock').stop().animate({opacity:0}, 500);     $(this).find('.txtDesc').animate({opacity:1}, 500);   //  $('#timeTxt').fadeOut();   //  $('#timeTxtDesc').fadeIn();    },   function () {     $(this).find('.txtBock').animate({opacity:1}, 500);     $(this).find('.txtDesc').stop().animate({opacity:0}, 500);   } ) 

Answer 2

Thought I would post this because none of these answers worked for me.

*The true params tell stop to clear the queue and go to the end of the animation

$(".txtWrap").stop().hover(   function () {     $(this).find('.txtBock').stop(true, true).fadeOut();     $(this).find('.txtDesc').fadeIn();    },   function () {     $(this).find('.txtBock').fadeIn();     $(this).find('.txtDesc').stop(true, true).fadeOut();   } ) 

Link: http://forum.jquery.com/topic/jquery-hover-events-cant-keep-up-with-fadein-and-fadeout-events-queue