Question

我有一些代码，基本上可以在鼠标悬停时放大图像，然后在mouseleave上重置。

我唯一的问题是，如果你快速鼠标悬停/离开，该功能会运行并运行并运行很多次。

如果当前正在制作动画，有没有办法防止该功能被触发？

我知道这可以通过CSS完成，但我需要能够支持所有浏览器回IE8，这样就不能选择了（Annoyingly）

谢谢！

$(document).ready(function () {
        $('.image img').on("mouseover", function () {
            $(this).animate({
                height: "110%",
                width: "110%",
                marginLeft: "-5%",
                marginTop: "-5%"
            }, 1000);
        });

        $('.image img').on("mouseleave", function () {
            $(this).animate({
                height: "100%",
                width: "100%",
                marginLeft: "0%",
                marginTop: "0%"
            }, 1000);
        });
    });

Answer 1

你必须停止排队动画。应该这样做 -

$(document).ready(function () {
    $('.image img').on("mouseover", function () {
        $(this)
        .stop(true, false)
        .animate({
            height: "110%",
            width: "110%",
            marginLeft: "-5%",
            marginTop: "-5%"
        }, 1000);
    });

    $('.image img').on("mouseleave", function () {
        $(this)
        .stop(true, false)
        .animate({
            height: "100%",
            width: "100%",
            marginLeft: "0%",
            marginTop: "0%"
        }, 1000);
    });
});

.stop的第一个参数是clearQueue，第二个参数是jumpToEnd

Answer 2

对此的一个解决方案是动态绑定和取消绑定鼠标悬停和鼠标离开功能。要执行此操作，只需从mouseleave未绑定和mouseover绑定开始。

在mouseover正文的开头，绑定mouseleave并取消绑定mouseover。

在mouseleave正文的开头，绑定mouseover并取消绑定mouseleave。

这应该可以解决问题。

jQuery - 停止函数再次被触发，直到它停止运行

2 个答案: