JQuery: Можно ли вызвать delay() между addClass() и т.д.?

Ответ 1

Вы можете создать новый элемент очереди для удаления класса:

$("#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 знать, что вы закончили с этим поставленным пунктом и что он должен перейти к следующему.

Ответ 2

AFAIK метод задержки работает только для числовых модификаций CSS.

Для других целей JavaScript поставляется с методом setTimeout:

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

Ответ 3

Я знаю, что это очень старый пост, но я объединил несколько ответов в функцию обертки 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');

Ответ 4

jQuery CSS-манипуляция не помещается в очередь, но вы можете сделать ее выполненной внутри очереди "fx", выполнив:

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

То же самое, что и вызов setTimeout, но вместо этого использует mecanism очереди jQuery.

Ответ 5

Конечно, было бы проще, если бы вы расширили 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);

Ответ 6

Задержка работает в очереди. и насколько я знаю, манипуляция css (кроме анимированного) не ставится в очередь.

Ответ 7

delay не работает ни с одной из функций очереди, поэтому мы должны использовать setTimeout().

И вам не нужно разделять вещи. Все, что вам нужно сделать, это включить все в метод setTimeOut:

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

Ответ 8

Попробуйте следующее:

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

Ответ 9

Попробуйте эту простую функцию стрелки:

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