个人中心
gpt4 book ai didi

jQuery 事件没有持续触发

转载 作者：行者123 更新时间：2023-12-01 01:44:19 25 4
gpt4 key购买 nike

我正在尝试做一些相当简单的事情。我想将菜单从图像后面滑出，并在转换时淡入和淡出。

因此，默认菜单的 z-index 设置为 -1，图像设置为 1。

当您将鼠标悬停在表格上时，我会为幻灯片设置动画，并具有超时功能，将菜单的 z 索引更改为 2。当您将鼠标悬停在表格上时，我将 z 索引设置回 -1 并将过渡动画设置回来在图像后面。

这应该有效，而且有时确实有效。我注意到，特别是如果我将 mouseover 设置为悬停，有时当鼠标远离其设置的表格时， mouseover\hover 函数会在 mouseleave 触发后触发。

所以最终发生的情况是，有时 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>

最佳答案

CSS 过渡是目前网络上最好的动画元素。你应该尝试一下。我根据你的 fiddle 创建了一个 fiddle ，仅使用 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 .

关于jQuery 事件没有持续触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30472306/

25 4 0
文章推荐： javascript - 使用 JSON.stringify() 将 JSON 对象转换为字符串时出现循环对象值错误
文章推荐： python - 如何忽略带引号的字段中的 CSV 分隔符？
文章推荐： python - 我使用 random.shuffle 是错误的还是这是一个错误？
文章推荐： firefox - 使用 FireFox 和 HTTP(S) 测试脚本记录器时的 JMeter "Content encoding Error"
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com