javascript - jquery 中的链接方法

Question

这个问题已经有答案了:

Jquery delay execution of script (2 个回答)

已关闭 4 年前。

我正在尝试通过添加类 pressed 来制作动画然后等待 100ms 然后删除该类。

当我刚刚添加类(class)时 $("#" + currentColor).addClass("pressed");该代码工作正常。但是当我链接这些方法或单独编写它们时，所有方法都不起作用。

$(".btn").on("click", function () {
    var userChosenColor = $(this).attr("id");
    animatePress(userChosenColor);
});
function animatePress(currentColor) {
    $("#" + 
currentColor).addClass("pressed").delay(100).removeClass("pressed");
}

我希望它添加类 pressed然后等待 100ms 然后删除类 pressed 。但它没有任何作用。我在控制台中也没有收到任何错误报告

Answer 1

这是因为delay方法只延迟效果，例如fadeIn。它不会延迟添加或删除类。您应该为此使用 setTimeout。

$(".btn").on("click", function () {
    var userChosenColor = $(this).attr("id");
    animatePress(userChosenColor);
});

function animatePress(currentColor) {
    $("#" + currentColor).addClass("pressed");
    window.setTimeout(function () {
        $("#" + currentColor).removeClass("pressed");
    }, 100);
}