0

我在悬停事件上构建了一个 jquery 幻灯片。在页面底部，我有一个滑块元素，当鼠标悬停在该元素上时该元素会展开。我有一个标签会突出元素的顶部，以提醒用户该功能存在。此选项卡给我带来了很多问题，当您将鼠标悬停在选项卡上时，该元素将反复扩展和收缩。我尝试编辑 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>

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

4

2 回答 2

1

为名为 的变量添加 if/else 语句var activeAnimation，它应该在0脚本之外声明，然后只允许动画，如果0它启动动画集activeAnimation = 1，然后在动画结束时，使回调包含一个函数activeAnimation = 0

于 2011-06-09T14:10:44.360 回答
0

试试这个http://jsfiddle.net/Qsqrc/

于 2011-06-09T14:32:06.880 回答