Как использовать задержку для добавления/удаления классов

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

У вас есть дополнительные $ в пунктах

$(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 3

Несмотря на то, PSL answer, вероятно, лучшим решением, здесь альтернатива. Вы можете создать свою собственную функцию задержки, так как .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'); 
}) 

See the code in action