CODEWITHSUNDEEP
jquery
nasty
nasty

Reputation: 7077

Jquery hover repetition

I want to move an image when I mouse over and put it back to the previous position when mouseOut. This script works fine, but if I move my mouse over few times, it keeps on going up and doing. How can I fix it?

$(document).ready(function () {
  $(".HomeClaimWrapper .img").hover(function () {
    $(".HomeClaimWrapper .img").animate({
      top: "-15px"
    }, 500);

  });


  $(".HomeClaimWrapper .img").mouseout(function () {
    $(".HomeClaimWrapper .img").animate({
      top: "0px"
    }, 500);
  });
});

Upvotes: 0

Views: 351

Answers (1)

wirey00
wirey00

Reputation: 33661

use jQuerys .stop() function. Read more about it here http://api.jquery.com/stop/ - using this prevents multiple queued animations

$(".HomeClaimWrapper .img").hover(function(){
    $(".HomeClaimWrapper .img").stop().animate({ // <-- add it there and pass in params
    // for the desired affect
        top: "-15px"
    }, 500 );

});

Upvotes: 4

Related Questions