如何使用延迟添加/删除类

How to use delay to add/remove classes

本文关键字：删除 添加 何使用 延迟      更新时间：2023-09-26

在.click（function（）｛｝）内部；我正在尝试使用它来删除一个类，添加另一个，延迟一秒钟，然后再次反转所有内容。这对我来说似乎很简单，但我被这个坏功能难住了：

$(document).ready(function() {
    var items = $(".tabs-group .sidebar ul li:not(:last-child) a");
    var prompt = $(".prompt-button");
    prompt.click(function () {
        $(items).removeClass("pulse").addClass("solid").delay(1000).removeClass("solid").addClass("pulse");
    });
});

感谢帮助，谢谢！

尝试将后续操作放入队列中。否则removeClass，addClass不会添加到FX队列中，从而通过直接应用延迟来延迟它。

$(items).removeClass("pulse").addClass("solid").delay(1000).queue(function(){
                               $(this).removeClass("solid").addClass("pulse");
});

你可以做：

$(items).toggleClass("pulse solid").delay(1000).queue(function(){
                               $(this).toggleClass("pulse solid");
});

尽管PSL答案可能是最好的解决方案，但这里有一个替代方案。您可以创建自己的延迟函数，因为.delay()只适用于排队的元素。

这里有一个例子：

(function($){
    if($ && !$.fn.wait){
        $.fn.wait = function(time, fn){
            setTimeout(fn.bind(this), time);
            return this;
        }
    }
})(jQuery)

在你的文件中插入这个之后，你可以这样称呼它：

$(items).removeClass("pulse").addClass("solid").wait(1000, function(){
     this.removeClass('solid');
})

请参阅操作中的代码

您在物品中有额外的$

$(document).ready(function() {
    var items = $(".tabs-group .sidebar ul li:not(:last-child) a");
    var prompt = $(".prompt-button");
    prompt.click(function () {
        items.removeClass("pulse").addClass("solid").delay(1000).removeClass("solid").addClass("pulse");
    });
});
相关文章：