jQuery-动画函数

我有一段代码如下所示：

$(".tagArea li").mouseover(function(){
  $(this).animate({
      borderWidth: "2px"
  }, 1000 );
});
$(".tagArea li").mouseout(function () {
$(this).animate({
      borderWidth: "1px"
  }, 1000 );
}); 

当我尝试将其悬停在特定列表项上时，它会正确地设置动画，但不会停止一次。它一直在做两三次

如何避免这种情况，我已经尝试过很多次了，但是没有任何积极的结果发生在我身上

请帮忙。

试试这个：

$(".tagArea li").mouseover(function(){
  $(this).animate({
      borderWidth: "2px"
  }, 1000 );
}) 
.mouseout(function () {
$(this).animate({
      borderWidth: "1px"
  }, 1000 );
});

---

详细参考已在

中给出。在此场景中，您可以使用

.stop（）

并链接您的事件：

$(".tagArea li").mouseover(function(){
   $(this).stop().animate({
      borderWidth: "+=5px"
   }, 500 );
}).mouseout(function () {
    $(this).stop().animate({
      borderWidth: "1px"
    }, 500 );
});

---

签出小提琴：

而不是通过jQuery设置动画，您可以使用and:hover

.tagArea li { -webkit-transition: border-width .25s; -moz-transition: border-width .25s; transition: border-width .25s; border-width: 1px; } .tagArea li:hover { border-width: 2px; } 李先生{ -webkit过渡：边框宽度.25s； -moz过渡：边框宽度.25s； 过渡：边界宽度.25s； 边框宽度：1px； } .Tagli区域：悬停{ 边框宽度：2倍； }

---

你能提供吗？谢谢你的代码。正如我所预料的那样，这很好。