javascript - 如何在执行时停止 jQuery 动画

Question

这是我的示例代码。下面我解释一下我的问题：

<script type="text/javascript" src="jquery.min-1.10.1.js"></script>
<script type="text/javascript" src="jquery.animate-colors.js"></script>
<script type="text/javascript">
$(function () {
  $("a").mouseover(function (){
        $("a").animate({color: "#eee"});
   });

 $("a").mouseleave(function () {
        $('a').animate({color: '#000'});
  });
});
</script>
<a href="javascript:;">Hover Me</a>

解释：

当我将鼠标悬停在一个项目上时，每次您通过鼠标时都会连续执行，并且我不想在执行操作时再次运行。我可以为此推荐什么？

Answer 1

首先，链接您的事件并使用on，然后添加.stop(stop, stop)：

$(function () {
  $("a").on('mouseover', function (){
        $(this).stop(true, true).animate({color: "#eee"});
   }).on('mouseleave', function () {
        $(this).stop(true, true).animate({color: '#000'});
   });
});

演示：http: //jsfiddle.net/maniator/bktUt/

Answer 2

请使用一些合乎逻辑的东西：

在 $(document).ready 函数中声明一个变量。

var i = 0;

var j = 0;

 $(function () {
    if(i==0){
      i=1;
      $("a").mouseover(function (){
        $("a").animate({color: "#eee"});
      });

     }
    if(j==0){
       j=1;
       $("a").mouseleave(function () {
        $('a').animate({color: '#000'});
     }); 
    }
 });
 }

 });

Answer 3

您正在使用正确的 mouseleave 退出事件，但您没有使用正确的 enter 事件。您应该使用不会多次触发的 mouseenter。

.mouseenter（处理程序（事件对象））

描述：绑定一个事件处理程序，当鼠标进入一个元素时触发，或者在一个元素上触发该处理程序。

同样正如 Neal 指出的那样，您还应该使用 stop 以防在用户退出/进入元素时触发离开/打开动画。