javascript - 强制 jQuery 在运行时更改动画

我正在创建一个带有自定义动画的 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>

我该如何解决这个问题？

最佳答案

在开始动画之前使用.stop()。它将停止之前的动画。

等式