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);
  }
)