Question

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

当我刚刚添加课程时 $("#" + 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。但是它什么也没做。我也没有在控制台中收到任何错误报告

Answer 1

这是因为延迟方法仅延迟效果，例如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);
}

Answer 2

您可以使用setTimeout()方法来延迟第二步操作。

您的代码应如下所示：

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

function animatePress(currentColor) {
   $("#" + currentColor).addClass("pressed");

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

}

jQuery中的链接方法

2 个答案: