Question

我使用.animate（）创建一个“简单”的动画菜单，以放大用户悬停的菜单项。这几乎是正确的，但如果用户快速移动光标，它会做一些奇怪的事情。此外，元素并不总是同时具有动画效果。

显示它的最简单方法是使用以下链接。

或

<head>
<script src="jquery-ui/js/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("#test1").hover( function () {
    $(this).animate( { width:"599px",left:"0px", height:"168px" }, 100 )
  },
  function () {
    $(this).animate( { width:"246px",left:"9px", height:"84px" }, 100 )
  }
);

$("#test2").hover( function () {
    $(this).animate( { width:"599px",left:"0px", height:"168px", top:"-21px" }, 100 )
    $(".test").animate( { top:"-21px" }, 100 )
  },
  function () {
    $(this).animate( { width:"246px",left:"9px", height:"84px", top:"0px" }, 100 )
    $(".test").animate( { top:"0px" }, 100 )
  }
);

$("#test3").hover( function () {
    $(this).animate( { width:"599px",left:"0px", height:"168px", top:"-63px" }, 100 )
    $(".test").animate( { top:"-63px" }, 100 )
  },
  function () {
    $(this).animate( { width:"246px",left:"9px", height:"84px", top:"0px" }, 100 )
    $(".test").animate( { top:"0px" }, 100 )
  }
);

$("#test4").hover( function () {
    $(this).animate( { width:"599px",left:"0px", height:"168px", top:"-84px" }, 100 )
    $(".test").animate( { top:"-84px" }, 100 )
  },
  function () {
    $(this).animate( { width:"246px",left:"9px", height:"84px", top:"0px" }, 100 )
    $(".test").animate( { top:"0px" }, 100 ) 
  }
);



});

</script>
<style type="text/css">
    .container {
        width:599px; background-color:#000;padding:0px;  height:336px; overflow-y:hidden;
    }

    .test {
        width:246px; background-color:#039; left:9px; top:0px; position:relative; height:84px;
    }
</style>
</head>

<body>

    <div class="container">
        <div id="test1" class="test">
      test
      </div>
        <div id="test2" class="test">
            test
        </div>
        <div id="test3" class="test">
            test
        </div>
        <div id="test4" class="test">
            test
        </div>
    </div>

</body>

有什么想法吗？

由于

Answer 1

要么：

1。）保持高度不变或

2。）让悬停触发器显示/隐藏

单独的偏移DIV

当高度在顶部元素下方的任何位置发生变化时，可以在移动时将另一个元素置于鼠标下方，从而触发它的扩展/收缩但由于您的转换时间和循环时间而延迟发生时，另一个元素在光标下移动或移出焦点。

Answer 2

这是我的解决方案： http://jsfiddle.net/azLMc/

我为每个mouseleave（）函数添加了一个clearQueue（）调用。这将停止鼠标悬停动画，并立即执行mouseleave动画。没有它，鼠标悬停动画将继续运行，如果鼠标在完成之前离开了该区域，则不会注册它需要运行鼠标移动动画。

之后，当鼠标快速离开文档时，第一个DIV仍然卡住了。所以我在.container DIV中添加了一个mouseleave（），将第一个DIV返回到它的正常大小，然后进行“重置”。

jquery动画问题

2 个答案: