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

});