javascript - jQuery中的链接方法

Question

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

当我只添加类时 $("#" + 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然后等待 100 毫秒然后删除类pressed。但它什么也没做。我也没有在控制台中收到任何错误报告

标签： javascriptjquery

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);
}