mouseenter/mouseleave 不需要的挥动效果

Posted 2023-02-25

【中文标题】mouseenter/mouseleave 不需要的挥动效果

【英文标题】：mouseenter/mouseleave unwanted waving effect

【发布时间】：2012-06-15 02:17:27

【问题描述】：

我对 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 个小时了，现在我的一些第一个问题已经解决了这个波浪效果是我的最后一个

【参考方案1】：

试试这个：

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

);

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

);

【讨论】：

太棒了！试过了，但我把它放在 .mouseenter 和 .mouseleave .. noob 错误之前。非常感谢