Question

I have two divs:

<div id="small"></div>
<div id="big"></div>

The small really smaller and is upside the big. z-index: 5;

The jQuery: When hover small it goes crazy, because it goes out and in of the big in a loop. So I try to stop and make sure that it stops when its fadeIn. But there is a moment if the mouse goes out fast, it fadesOut and don’t fadeIn anymore. I don’t understand why?

  $("#big").hover(function(){
        $("#small").fadeIn();
    },function(){
        $("#small").fadeOut();
    }); 

    $("#small").hover(function() {
        $("#small").fadeIn().stop();
    }); 

Answer 1

You should stop it before starting to fade in:

 $("#small").stop().fadeIn();

Edit: I think that what you are really after is this code:

$("#big").hover(function(){
    $("#small").stop().animate({opacity: 0.0}, 1000);
},function(){
    $("#small").stop().animate({opacity: 1.0}, 1000);
}); 

$("#small").mouseover(function() {
    $("#small").stop().animate({opacity: 1.0}, 1000);
}); 

When you fade element out, its space won’t be preserved and there won’t be mouse events over it anymore. Instead, you can animate its opacity achieving same effect but preserving the space.

Live test case.