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

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

});