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

Answer 1

I was about to post a similar question when the superintelligent SO search engine highlighted this question for me, so I thought I'd post my own solution for posterity.

I took user113716's solution and fleshed it out a bit. In my case, the div I was hiding and showing started out as display:none, so I had to add opacity:0 to the CSS and tell the jQuery to set .css({display:block}) before it started animating the opacity to 1 to fade in.

On the fade out, I didn't need that, but I did add a callback to .hide() the div after animating the opacity to zero.

Here's a fiddle illustrating what I ended up with:

http://jsfiddle.net/mblase75/wx2MJ/

The relevant JavaScript:

$('li').mouseover(function() {
    $(this).addClass('hover');
    $('#' + $(this).data('divid')).stop().css({
        display: 'block'
    }).animate({
        opacity: 1
    }, 500);
});

$('li').mouseout(function() {
    $(this).removeClass('hover');
    $('#' + $(this).data('divid')).stop().animate({
        opacity: 0
    }, 500, function() {
        $(this).hide();
    });
});

Answer 2

If you have this thing:

$("#frase1").fadeIn(5000, function(){
   $("#frase2").fadeIn(10000, function(){
      $("#frase3").fadeIn(15000, function(){

      });
  });
});

all right, you must use this instruction to reset fadeIn or other event in queue:

$("#frase1").stop(false,true, true);
$("#frase2").stop(false,true, true);
$("#frase3").stop(false,true, true);

Answer 3

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 4

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

Answer 5

In times like this I turn to Brian Cherne's genius .hoverIntent() plugin -- 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();
  }
)