时间戳

首页 > 解决方案 > 如何在动画运行和移动时停止 mouseenter

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

问题描述

我有一个在 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");
});

所以，我想：“如果我在动画移动时更改类或用户将指针移出它，那么'.still' mouseenter 选择器将不再工作”但这显然是错误的，因为显然 mouseenter 正在工作即使更改了班级。我错过了什么？谢谢！

标签： javascriptjqueryanimationjquery-animatemouseenter

解决方案

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

推荐阅读