jQuery looping my fadeIn/fadeOut

Question

I've done some easy .hover(function() statement in jQuery. When i hover over a text i simply want a #div.fadeIn, and on non-hover fadeOut. It works. But it's just if i spam the text-trigger with hover and un-hoverring really quickly and then stop the animation begin to give a blinking effect. It just kind of loops, really annoying!

Answer 1

There are a few easy ways to fix this, but this one should provide a nice effect for what you want:

$("#yourtrigger").hover(function(){
    $("#div").stop(true).fadeTo( "fast", 1.0);
}, function(){
    $("#div").fadeOut( "fast" );
});

Its important not to use fadeIn with this method as it will stop fading after a while because of how jQuery tracks what it should "fade in to".

Answer 2

If you have something like this:

$('#your_div').action1().action2();

Change it to:

$('#your_div').action1(miliseconds, function() {
   $(this).action2(); 
});

You can even, with v1.4, add the delay() call like this.

$('your_div').action1().delay(miliseconds).action2();