Question

我试图做一些相当简单的事情。我想从图像后面滑出一个菜单，让它在转换时淡入淡出。

因此，默认情况下，菜单的z-index设置为-1，图像设置为1.

当你将鼠标悬停在表格上时，我会为幻灯片设置动画并设置超时功能，将菜单的z-index更改为2.当你对表格进行鼠标移动时，我将z-index设置回-1并为转换设置动画在图像背后。

这应该有用，有时它确实有效。我注意到，特别是如果我将鼠标悬停设置为悬停，有时当鼠标离开它所设置的表格附近时，mouseleave会触发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>

Answer 1

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。

Answer 2

javasript事件中的用户event.preventDfault（）和/或event.stopPropagation（）。

jQuery事件没有持续触发

2 个答案: