我在悬停事件上构建了一个 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/