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

});

mouseenter / mouseleave不需要的挥动效果

1 个答案: