Question

I have a piece of code shown below:

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

When I try to hover it on a particular list item, it properly animates but doesn’t stop doing just once. It keeps doing 2 or 3 times.

How to avoid this, I ‘ve tried many a times but no positive result occurs to me.

Kindly help.

Answer 1

Instead of animating through jQuery, you could just use CSS3 Transitions 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;
}