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

Question

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

0

Внутри.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");
    });
});

Помогите оценить, спасибо!

PSL 13 дек. 2013, в 23:04

Источник

Теги:

javascript

jquery

3 ответа

Ещё вопросы

PSL · Answer 1 · 2013-12-13T18-21-00.000Z

Попробуйте разместить последующую операцию в очереди. В противном случае 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");
});

Karl-André Gagnon · Answer 2 · 2013-12-13T19-48-00.000Z

Несмотря на то, что ответ 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');
})

См. Код в действии

Да, многоразового использования ... :) Мне это нравится.

Sadako · Answer 3 · 2013-12-13T19-52-00.000Z

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

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

Хотя это хорошее предложение, оно не является ошибкой или причиной неправильной работы.