jQuery - Animate功能

Question

我有一段代码如下所示：

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

当我尝试将其悬停在特定列表项上时，它会正确设置动画，但不会停止只执行一次。它一直做2到3次。

如何避免这种情况，我已经尝试了很多次但是没有出现任何积极的结果。

请帮助。

Answer 1

不是通过jQuery动画，而是使用CSS3 Transitions和：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;
}

Answer 2

试试这个：

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

详细参考已在http://api.jquery.com/mouseover/

中给出

Answer 3

在这种情况下，您可以使用.stop()来链接您的活动：

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

结帐小提琴：http://jsfiddle.net/YzaCZ/