Jquery fadeIn And fadeOut problem using hover over a div

Question

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.

Answer 1

Maybe you can have a boolean variable let's say it "is_faded_out" and set it true or false accordingly?

Answer 2

When you call fadeOut(), it will eventually make the item completely invisible, which probably triggers the mouseOut event.

Maybe you can use the fadeTo() method with a very low number, so it will not disappear:

function entraMouse()
{
    jQuery(this).fadeTo("fast",0.01);
}

function saleMouse()
{
    jQuery(this).fadeTo("fast",1.0);
}

Answer 3

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

Answer 4

thats probably due the bubbling effect, lets say that you have a div with some content there:

<div> <span>Hello</span> <p>World</p> </div>

then, the hover event for the Hello span, and the World paragrapgh is catched in the event listener of the hover of the div.

Answer 5

I had a similar problem, and solved this with:

function entraMouse()
{
    if (!jQuery(this).is(':hidden')) jQuery(this).fadeOut();
}

function saleMouse()
{
    if (jQuery(this).is(':hidden')) jQuery(this).fadeIn();
}