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

使用jQuerys .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 );

});

Jquery悬停重复

1 个答案: