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

In times like this I turn to Brian Cherne's genius .hoverIntent() plugin:
http://bit.ly/hoverintent -- It's quite smooth...waits until the user has slowed down enough before executing. You can configure it to your needs.

Just include the plugin (it's short enough I'll sometimes place it directly into my script file) then add the word Intent:

$(".txtWrap").hoverIntent(
  function () {
    $(this).find('.txtBock').fadeOut();
    $(this).find('.txtDesc').fadeIn();

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