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事件不一致发射

回答

相关问题