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

Question

在.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");
    });
});

帮助表示赞赏，谢谢！

Answer 1

尝试将后续操作放在队列中。 否则，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");
});

Answer 2

即使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');
})

查看实际代码

Answer 3

您的物品中有额外的$

$(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");
    });
});