Question

我正在创建一个带有自定义动画的jQuery下拉菜单，菜单应该在鼠标进入时启动动画，并在鼠标离开时开始关闭动画，而不管任何正在运行的动画。问题是jQuery在开始新动画之前完成了动画。例如;

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#start").mouseenter(function(){
    $("#box").toggle();
    $("#box").animate({
      top:'50px',
      opacity:'1'
    },500,function(){
    });
  });
  $("#start").mouseleave(function(){
    $("#box").animate({
      top:'25px',
      opacity:'0'
    },500,function(){
    $("#box").toggle();
    });
  });
});
</script> 
</head>

<body>
<button id="start">Start Animation</button>
<div id ="box" style="background:#e6e6e6;height:100px;width:100px;position:absolute;opacity:0;display:none;top:25px;">
</div>

</body>
</html>

我该如何处理？

Answer 1

使用.stop()开始动画。它将停止上一个动画。

当量

$("#box").stop().animate({...})

和.toggle()之前相同

$("#box").stop().toggle();

强制jQuery在运行时更改动画

1 个答案: