Question

我有一个动画在mouseenter上运行和移动，这是代码：

$(".still").mouseenter(function () {
    w1.goToAndPlay(0);
    $("#w1").delay(300);
    $("#w1").animate({left: '-200px'}, 1700, function() {
        $("#w1").delay(550);
        $("#w1").animate({left: '0px'}, 2500);
    });   
})

只有一个大问题我无法解决：如果我再次使指针指向内，则动画本身会重置（goToAndPlay），并且动画功能会不断运行。现在，我想要实现的是“冻结” mouseenter函数，直到一切完成。

这是我尝试过的方法，看起来很合逻辑，但不起作用：

$(".still").mouseenter(function () {
    w1.goToAndPlay(0);
    $("#w1").delay(300);
    $("#w1").animate({left: '-200px'}, 1700, function() {
        $("#w1").delay(550);
        $("#w1").animate({left: '0px'}, 2500, function() {
            $(this).attr("class","still");
        });
    });   
}).mouseleave(function () {
    $(this).attr("class","moving");
});

因此，我想：“如果我在动画移动时更改类，或者用户将指针移出该类，则mouseenter的'.still'选择器将不再起作用”，但这显然是错误的，因为显然即使更改了类，mouseenter仍在工作。我想念什么？谢谢！

Answer 1

您可以创建一个全局变量“ isAnimated”（超出当前函数的范围）并将其设置为false。在mouseenter上，它将设置为“ true”。在上一个动画回调中，将其设置为false。在动画功能中，您将检查“ isAnimated”是否为假-否则它将不会启动。

如何在动画运行和移动时停止mouseenter

1 个答案: