Question

我有一个功能，可以从页面底部激活div来显示系统消息

function showSystemMessage(iMessage, iType)
{   
    $(".systemMessage").removeClass("success error");
    $(".systemMessage").animate({ bottom: "0px" }, 600);
    $(".systemMessage").html(iMessage).addClass(iType);
    setTimeout(function() {
        $(".systemMessage").animate({ bottom: "-40px" }, 600);
    }, 3000);
}

它被称为

showSystemMessage("Thanks for voting", "success");

或者

showSystemMessage("An error occured", "error");

该功能运行正常，但问题是，当我调用它两次时，动画将在第一次完成。

我想要的是，当我调用该函数时，它应该为.systemMessage div设置动画，当我第一次调用它后，它应该在第一次动画后立即停止第一个动画并开始第二个动画以便我看到两个消息。

我试过像.stop()这样的东西，但我不知道如何处理它。

由于

Answer 1

这是使用.stop（）

的实现

function showSystemMessage(iMessage, iType)
{   
    $(".systemMessage").removeClass("success error");
    $(".systemMessage").stop().animate({ bottom: "0px" }, 600);
    $(".systemMessage").html(iMessage).addClass(iType);
    setTimeout(function() {
        $(".systemMessage").stop().animate({ bottom: "-40px" }, 600);
    }, 3000);
}

在开始新动画之前，您必须停止（）当前动画。所以在.animate（）之前添加.stop（）

jQuery停止动画并开始新动画

1 个答案: