jQuery事件不一致發射

我試圖做一些相當簡單的事情。我想從圖像後面滑出菜單，並在轉換時淡入淡出。jQuery事件不一致發射

那麼，默認菜單的Z-index值設置爲-1，當你將鼠標懸停我動畫幻燈片上的表，有一個超時功能改變的的z-index的圖像設置爲1

菜單設置爲2.當您使用鼠標移動表格時，我將z-index設置回-1，併爲圖像後面的轉換設置動畫。

這應該有效，它有時會。我注意到，特別是如果我將鼠標懸停設置爲懸停，有時mouseover \ hover功能在鼠標離開它所設置的表格附近時觸發。

所以最近發生的事情是，有時z-index沒有得到正確的改變，你可以看到菜單出現在圖像的前面，而它正在轉換。有時它仍然可以正常工作。你會認爲每次都會以相同的方式工作，無論好壞。

我試過不同的方法。我正在使用超時，因爲當後一個動畫完成時，有兩個未排隊的動畫運行時，很難保持一個函數運行。

這裏是我的代碼：

<script type="application/javascript"> 

$(document).ready(function() { 

$("#headerTable").mouseover(function(){ 

    $("#movableMenu") 
    .animate({top: "0px"}, {duration: 750, queue:false}) 
    .animate({opacity: "1"}, {duration: 1500, queue:false}); 
    setTimeout(function() { 
     console.log("Out: " + $("#movableMenu").css('z-index')); 
     $("#movableMenu").css('z-index', 2); 
     console.log("Out: " + $("#movableMenu").css('z-index')); 
    }, 1500); 


}); 

$("#headerTable").mouseleave(function() { 
    console.log("In: " + $("#movableMenu").css('z-index')); 
    $("#movableMenu").css('z-index', -1); 
    $("#movableMenu") 
    .animate({top: "-55px"}, {duration: 750, queue:false}) 
    .animate({opacity: "0"}, {duration: 1500, queue:false}); 
    console.log("In: " + $("#movableMenu").css('z-index')); 
}); 

$(".menuItem").hover(function(){ 
    $(this).css('color', 'teal'); 
    $(this).css('font-size', '18'); 
    $(this).css('font-weight', 'bold'); 
}); 
$(".menuItem").mouseout(function(){ 
    $(this).css('color', 'black'); 
    $(this).css('font-size', '16'); 
    $(this).css('font-weight', 'normal'); 
}); 

}); 


</script> 
</head> 

<body> 
<table id="headerTable" align="center" border="1"> 
<tr> 
<td><img width="600px" height="225px" src="images/heading2.png" style="z-index:2" /></td> 
</tr> 
<tr> 
<td> 
<div id="movableMenu" style="width:100%; height:50px; position:relative; top:-55px; z-index:-1; opacity:0"> 
<span class="menuItem">Home</span><span class="menuItem">Bio</span><span class="menuItem">Media</span><span class="menuItem">Scores</span><span class="menuItem">Lessons</span><span class="menuItem">Repertoire</span><span class="menuItem">Contact</span><span class="menuItem">Links</span> 
</div> 
</td> 
</tr> 
</table>

來源

2015-05-27 Marcel Marino

你可以用這個設置一個小提琴嗎？從第一次查看你的代碼開始，你使用的是setTimeout，但我想你會想使用完整的函數，而不是使用2個獨立的計時器。還有一個.stop（）你可以調用，以防你在原始動畫結束之前的鼠標懸停然後鼠標移出 –

爲什麼你不使用CSS轉換呢？ – lmgonzalves

一些想法。您必須在圖像中添加'position：relative'來真正應用默認的z-index。另外，我不會改變z-index屬性，而是建議通過'translate3d'修改'translateZ'屬性。你可以檢查這個問題：http://stackoverflow.com/questions/27302395/animate-translate3d-with-jquery –

CSS過渡是最好有現在動畫在網絡上的元素。你應該試試看。我創建一個基於你的小提琴，只有CSS，不需要JavaScript。並沒有太多的CSS既不。

CSS：

.menuItem { 
    display:inline-block; 
    text-align:center; 
    margin: 0 8px; 
    height:200px; 
    vertical-align:top; 
    cursor:pointer; 
    color: black; 
    font-size: 16px; 
    font-weight: normal; 
} 

.menuItem:hover { 
    color: teal; 
    font-size: 18px; 
    font-weight: bold; 
} 

#movableMenu{ 
    position:relative; 
    width:100%; 
    height:50px; 
    top: -55px; 
    opacity: 0; 
    z-index: 2; 
    transition: 1s; 
    -webkit-transition: 1s; /* You can change the speed */ 
} 

#headerTable:hover #movableMenu{ 
    top: 0; 
    opacity: 1; 
}

也許需要一些調整，但作品。

FIDDLE：https://jsfiddle.net/lmgonzalves/4tuwbyvn/3/

您可以瞭解更多關於CSS轉換here和here。

來源

2015-05-27 04:13:38 lmgonzalves

@Imgonzalves我很欣賞這些信息;我對學習CSS動畫非常感興趣。你的小提琴的問題是菜單在圖像上仍然可見。這是我在Z指數上遇到的問題。 –

在javasript事件中用戶event.preventDfault（）和/或event.stopPropagation（）。

來源

2015-05-27 04:19:19 Nilesh

jQuery事件不一致發射

回答

相關問題