javascriptjquerymouseentermouseleavefadeto

jQuery mouseenter and mouseleave fadeTo prevent delayed repeat

So, I've got a div which fades up on mouse enter and down on mouseleave which works fine. 

$('.myDiv').mouseenter(function(){
$(this).fadeTo('slow', 1);
});

$('.myDiv').mouseleave(function(){
$(this).fadeTo('slow', 0.4);
});

See jsfiddle .

However, if you quickly move the mouse over and back and again several times, the div will "flash" as the animation keeps running. Is there a way to stop this from occurring?

I've tried callbacks but haven't got the desired effect.

Any suggestions?

Solution

  • Try:

    $('.myDiv').mouseenter(function(){
    $(this).stop();
    $(this).fadeTo('slow', 1);

});
$('.myDiv').mouseleave(function(){
    $(this).stop();
    $(this).fadeTo('slow', 0.4);
});

    https://jsfiddle.net/1Lrcubwp/