Javascript – Jquery fadeIn And fadeOut problem using hover over a div

animationjavascriptjquery

I have this code:

var x;
x=jQuery(document);
x.ready(inicializarEventos);

function inicializarEventos()
{
    var x;
    x=jQuery(".Caja2");
    x.hover(entraMouse,saleMouse);
}


function entraMouse()
{
    jQuery(this).fadeOut();
}

function saleMouse()
{
    jQuery(this).fadeIn();
}

The problem is that when I move the mouse over the box it starts fade In and Fade Out constantly until stope the mouse move.

Other bad behevior is thar if I move the mouse in and out the box several times faster than the fade, it keep doing the efect over and over.

I need something that stop the animation when the mouse go back over the box.

Best Solution

On the second issue:

If your animations are "building up" as you run the mouse over the box, you can fix that by calling stop() first. Like so:

jQuery(this).stop().fadeOut();


jQuery(this).stop().fadeIn();