淡入/淡出div中的某个元素，鼠标位于/超出div

Question

对于愚蠢的标题感到抱歉，我无法想到其他任何内容，如果有人已经问过我，我很抱歉，我无法找到它。

无论如何，我正在用jQuery制作一个画廊。我有一个div和图片以及该div内的上一个/下一个按钮。这些按钮位于图片上，我希望它们在默认情况下处于隐藏状态，当将鼠标移到div上时淡入，当我将鼠标移出div时淡出。问题是，当我将鼠标从图片移动到按钮时，尽管我没有真正离开包含图片和按钮的div，但javascript会将其注册为鼠标事件。我做了一个小提示，告诉你发生了什么事：http://jsfiddle.net/7Ppbm/

有没有人有解决这个问题的办法？谢谢

Answer 1

您应该使用hover功能：

$("#button").hide(); 

$("#container").hover(function(){ 
    $("#button").fadeIn(); 
},function(){ 
    $("#button").fadeOut(); 
}); 

Answer 2

你缺少的是一个超时，它会阻止它一次又一次地淡出。 同样在一个侧面说明，使用.on()这是一个新的jQuery的1.7.2

$("#button").fadeOut(); 
var timer; 

$("#container img").on({ 
    mouseover: function() { 
     clearTimeout(timer); 
     $("#button").fadeIn(); 
    }, 
    mouseout : function() { 
     timer = setTimeout(function() { 
      $("#button").fadeOut(); 
     }, 100); 
    } 
}); 

jsFiddle updated

Answer 3

为什么不利用CSS做过渡？他们无处不在支持除IE http://caniuse.com/#search=transition

你举的例子修改： http://jsfiddle.net/b4e4M/