淡入/淡出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/