jquery - jQuery悬停重复

Question

我想在鼠标悬停时移动图像并在 mouseOut 时将其放回先前的位置。该脚本运行良好，但如果我将鼠标移过几次，它就会继续运行。我该如何解决？

$(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

使用 jQuery 的 .stop() 函数。在这里阅读更多关于它http://api.jquery.com/stop/ - 使用它可以防止多个排队的动画

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

});