jQuery: Чи можу я викликати затримку () між addClass () та подібним?

Щось таке просто, як:

$("#div").addClass("error").delay(1000).removeClass("error");

Схоже, не працює. Яка була б найпростіша альтернатива?

Ви можете створити новий елемент черги, щоб видалити клас:

$("#div").addClass("error").delay(1000).queue(function(next){
    $(this).removeClass("error");
    next();
});

Або використовуючи метод dequeue :

$("#div").addClass("error").delay(1000).queue(function(){
    $(this).removeClass("error").dequeue();
});

Причина, по якій потрібно зателефонувати nextабо dequeueповідомити jQuery про те, що ви робите з цим елементом у черзі, і що він повинен перейти до наступного.

Метод затримки AFAIK працює лише для числових модифікацій CSS.

Для інших цілей JavaScript поставляється із методом setTimeout:

window.setTimeout(function(){$("#div").removeClass("error");}, 1000);

Я знаю, що це дуже стара публікація, але я поєднав кілька відповідей у ​​функцію обгортки jQuery, яка підтримує ланцюжок. Сподіваюся, що це комусь вигідно:

$.fn.queueAddClass = function(className) {
    this.queue('fx', function(next) {
        $(this).addClass(className);
        next();
    });
    return this;
};

І ось обгортка RemoveClass:

$.fn.queueRemoveClass = function(className) {
    this.queue('fx', function(next) {
        $(this).removeClass(className);
        next();
    });
    return this;
};

Тепер ви можете робити такі речі - зачекайте 1 сек, додайте .error, зачекайте 3 секунди, видаліть .error:

$('#div').delay(1000).queueAddClass('error').delay(2000).queueRemoveClass('error');

Маніпуляції з CSS jQuery не в черзі, але ви можете зробити його виконаним всередині черги 'fx', виконавши:

$('#div').delay(1000).queue('fx', function() { $(this).removeClass('error'); });

Зовсім те саме, що викликати setTimeout, але замість цього використовується меканізм черги jQuery.

Звичайно, було б простіше, якби розширити jQuery так:

$.fn.addClassDelay = function(className,delay) {
    var $addClassDelayElement = $(this), $addClassName = className;
    $addClassDelayElement.addClass($addClassName);
    setTimeout(function(){
        $addClassDelayElement.removeClass($addClassName);
    },delay);
};

після цього ви можете використовувати цю функцію, як addClass:

$('div').addClassDelay('clicked',1000);

Затримка працює на черзі. і наскільки я знаю, маніпуляція css (крім анімації) не ставиться в чергу.

delayне працює ні в одній функції черги, тому ми повинні використовувати setTimeout().

І вам не потрібно розділяти речі. Все, що вам потрібно зробити, це включити все в setTimeOutметод:

setTimeout(function () {
    $("#div").addClass("error").delay(1000).removeClass("error");
}, 1000);

Спробуйте це:

function removeClassDelayed(jqObj, c, to) {    
    setTimeout(function() { jqObj.removeClass(c); }, to);
}
removeClassDelayed($("#div"), "error", 1000);

Спробуйте цю просту функцію зі стрілкою:

setTimeout( () => { $("#div").addClass("error") }, 900 );