jQuery: я могу вызвать delay () между 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 );