CODEWITHSUNDEEP
jqueryhtmlcssjquery-animate
Arunkumar Srisailapathi
Arunkumar Srisailapathi

Reputation: 1169

jQuery - Animate function

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.

Upvotes: 0

Views: 85

Answers (3)

Jai
Jai

Reputation: 74738

In this scenario you can use .stop() and you can chain your events:

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

checkout the fiddle: http://jsfiddle.net/YzaCZ/

Upvotes: 0

Beardy
Beardy

Reputation: 750

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;
}

Upvotes: 1

Moorthy GK
Moorthy GK

Reputation: 82

try this :

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

detail reference has given in http://api.jquery.com/mouseover/

Upvotes: 0

Related Questions