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

});