如何使用延遲添加/刪除類

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