jQuery: я могу вызвать delay () между addClass () и тому подобное?

Question

Что-то простое, как:

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

не похоже на работу. Что будет самой простой альтернативой?

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

Answer 2

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

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

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

Answer 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');

Answer 4

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

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

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

Answer 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);

Answer 6

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

Answer 7

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

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

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

Answer 8

Попробуйте это:

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