jquery - jQuery - 动画功能

Question

我有一段代码如下所示：

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

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

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

请帮忙。

Answer 1

您可以使用CSS3 过渡和 :hover，而不是通过 jQuery 制作动画。

.tagArea li {
  -webkit-transition：边框宽度 .25s；
     -moz-transition：边框宽度 .25s；
          过渡：边框宽度 .25s；
  边框宽度：1px；
}

.tagArea li:hover {
  边框宽度：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/