2013-08-19 69 views
0

編輯jQuery的鼠標輸入

我是覆蓋有較高的z-index比「的.bar」元素的問題。 感謝@nnnnnn指出明顯!

在我創建的網站上,我希望當用戶將鼠標懸停在某個元素上並且在它們離開元素時淡入淡出效果。

我使用至今的代碼是:

$(".bar").mouseenter(function() { 
$('#overlay_hover').fadeIn('slow'); 
}) 

$(".bar").mouseleave(function() { 
$('#overlay_hover').fadeOut('slow'); 
}) 

本工程以淡入覆蓋,但是當我添加第二一段代碼,當你將鼠標懸停在「的.bar」覆蓋淡入和淡出到反覆出去。我相信這很簡單,但我只是從jQuery開始,任何幫助或方向都非常感謝!

+1

疊加元素是否出現在'.bar'元素的頂部? – nnnnnn

+0

謝謝@nnnnnn,現在很明顯,這是問題所在! –

回答

2

你可以使用.stop()

例如

$('#overlay_hover').stop().fadeOut('slow'); 

jQuery的參考http://api.jquery.com/stop/

這裏也有看 Jquery Stop Fadein/Fadeout

+0

OP說:「當你將鼠標懸停在'.bar'上時,疊加層會反覆淡入淡出」,他沒有說「當你在前一個動畫運行時多次移動鼠標,它會淡入淡出幾次」。 – nnnnnn

0

或者你可以嘗試使用,

$(".bar").on("mouseenter", "div", function(){ 
    $('#overlay_hover').fadeIn('slow'); 
}).on("mouseleave", "div", function(){ 
    $('#overlay_hover').fadeOut('slow'); 
});