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

Question

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

我唯一的问题是，如果您快速将鼠标悬停/离开，该函数就会运行、运行、运行很多次。

如果该函数当前正在动画，有什么方法可以阻止该函数触发吗？

我知道这可以通过 CSS 来完成，但我需要能够支持所有浏览器回到 IE8，所以这不是一个选项(令人烦恼)

谢谢!!

$(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