Question

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

Answer 1

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

});