gpt4 book ai didi

jquery - 如何修复 JQuery 幻灯片元素的 CSS

转载 作者:太空宇宙 更新时间:2023-11-04 16:22:36 24 4
gpt4 key购买 nike

我在悬停事件上构建了一个 jquery 幻灯片。在页面底部,我有一个 slider 元素,当鼠标悬停在该元素上时,该元素将展开。我有一个标签会突出元素的顶部,以提醒用户该功能存在。这个选项卡给我带来了很多问题,当您将鼠标悬停在该选项卡上时,该元素会反复展开和收缩。我曾尝试编辑 CSS,当我删除 margin-top 时它可以正常工作,但这不是设计的目的。我也尝试添加一个 DIV 来解决这个问题,但没有用。你能帮我让选项卡正常工作吗?

我正在使用 JQuery 1.5.1

这是 HTML:

<body>   
<div class="Livwidget">
<div class="tab"></div>
</div>
</body>

这是 CSS:

.Livwidget{
background: #000;
bottom: 0;
left: 0;
margin-left: 5%;
margin-right: 5%;
padding-top: 3px;
position: fixed;
width: 90%;
}


.tab{
background: #000;
height: 30px;
margin-left: 0;
margin-top: -30px;
width: 135px;
}

这是JS:

<script> 
$(document).ready(function(){
$(".Livwidget").hover(makeTall,makeShort);
}); // close document.ready

function makeTall(){ $(this).animate({"height":250},350);}
function makeShort(){ $(this).animate({"height":5},350);}
</script>

任何帮助将不胜感激。我花了几个小时尝试解决这个问题,但似乎无法弄清楚。

最佳答案

为名为 var activeAnimation 的变量添加一个 if/else 语句,它应该在脚本之外声明为 0,然后仅当它是 时才允许动画>0,一旦启动动画集 activeAnimation = 1,然后在动画结束时,使回调包含一个函数来制作 activeAnimation = 0

关于jquery - 如何修复 JQuery 幻灯片元素的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6294090/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com