jquery - mouseenter/mouseleave 不需要的挥动效果

Question

我对 JQuery 相当陌生。话虽如此，我正在尝试使用.mouseenter导致图像尺寸变大并在 上恢复到正常尺寸的.mouseleavea ，它可以工作，但我的问题是它会启动一个随机循环次数的波浪效果。如果我将鼠标悬停在它们上面，它会变得非常疯狂。

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

});