mouseenter/mouseleave不需要的波動效果

Question

我對JQuery相當陌生。這是說我試圖使用.mouseenter，導致圖像變得更大，並在.mouseleave返回到正常大小，它的工作原理，但我的問題是它會啓動一個循環隨機次數的波效應。如果我將它們全部放在上面，它會變得非常瘋狂。

JQuery的

$(document).ready(function() { 

    $(".site").mouseenter(function(){ 
     $(this).animate({ 
      width: "+=60px", 
      height:"+=60px" 
     }, 1000); 

    }); 

    $(".site").mouseleave(function(){ 
     $(this).animate({ 
      width: "-=60px", 
      height: "-=60px" 
     }, 1000); 

    }); 
}); 

的Html

<div id="shape"> 
        <img src="../images/site1.jpg" class="site"/> 
        <img src="../images/site2.jpg" class="site"/> 
        <img src="../images/site3.jpg" class="site"/> 
        <img src="../images/site4.jpg"class="site"/> 
        <img src="../images/site5.jpg"class="site"/> 
        <img src="../images/site1.jpg"class="site"/> 
        <img src="../images/site2.jpg"class="site"/> 
        <img src="../images/site3.jpg"class="site"/> 
       </div> 

我一直在網上找的約2小時，現在一些我的第一個問題是固定的這波效果是我最後一個

Answer 1

試試這個：

$(".site").mouseenter(function(){ 
    $(this).stop().animate({ 
     width: "+=60px", 
     height:"+=60px" 
    }, 1000); 

}); 

$(".site").mouseleave(function(){ 
    $(this).stop().animate({ 
     width: "-=60px", 
     height: "-=60px" 
    }, 1000); 

});