animate()方法,如何让鼠标悬停一次只运动一次，而不是像带记忆一样悬停几次就运动几次。

在使用animate（）方法时，发现鼠标连续离开悬停几次，div（id=box）会运动几次，如何让鼠标悬停一次div就运动一次，而不是像带记忆一样悬停几次就运动几次。

<html>
<head>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
  {
  $("#box").mouseover(function(){
    $("#box").animate({height:"300px"},"slow");
  });
  $("#box").mouseout(function(){
    $("#box").animate({height:"100px"});
  });
});
</script>
</head>
<body>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>
</body>
</html>

设置一个flag，然后根据flag的值来决定是否执行

用mouseenter
没看清题目，你试试这样可以吗

$(document).ready(function () {
            var animated = false;
            $("#box").mouseover(function () {
                if (!animated) {
                    animated=true;
                    $("#box").animate({height: "300px"}, "slow", function () {
                        animated=false;
                    });
                }
            });
            $("#box").mouseout(function () {
                $("#box").animate({height: "100px"});
            });
        });

主要思路就是判断当前是否正在动画过程中╮(╯_╰)╭

$("#box").mouseover(function(){
  if (!$("#box").is(':animated')) {
    $("#box").animate({height:"300px"}, "slow");
  }
});

$("#box").mouseout(function(){
  $("#box").animate({height:"100px"});
});

$("#box").stop().animate({height:"300px"}, "slow");

$("#box").stop().animate({height:"00px"});

这个的实现思路你可以在在animate()函数执行前加入 stop()函数，确保上一次函数执行完。具体代码如下

`<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
  {
  $("#box").mouseover(function(){
    $("#box").stop().animate({height:"300px"},"slow");
  });
  $("#box").mouseout(function(){
    $("#box").stop().animate({height:"100px"});
  });
});
</script>

<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>`

不知道这种效果是否是你想要的

stop(true,true)第一个退出动画堆栈，第二个跳动画结束

【热门文章】