CODEWITHSUNDEEP
jqueryjquery-animatemarginmouseleave
sarah3585
sarah3585

Reputation: 637

JQuery animate using margin

What I have is working but I want to see if there is a better way to write the code and I'm also getting a delay on the mouseleave. The actual animation is happening at the desired speed but after my mouse leaves it seems to take about 2-3 seconds before it does anything.

CSS is initally set to margin-left:-64px

$('.homeButton').mouseover(function(){
  $('.homeButton').animate({marginLeft:'0px'},'slow');  
});

$('.homeButton').mouseleave(function(){
   $('.homeButton').animate({marginLeft:'-64px'},200);  
});

Upvotes: 1

Views: 563

Answers (1)

Ram
Ram

Reputation: 144729

You can use stop and hover methods.

Stop the currently-running animation on the matched elements.

$('.homeButton').hover(function(){
     $(this).stop(true, true).animate({marginLeft:'0px'},'slow');  
}, function(){
     $(this).stop(true, true).animate({marginLeft:'64px'},'slow');  
})

Upvotes: 1

Related Questions