jQuery: Kann ich delay() zwischen addClass() und so aufrufen? als

Question

Etwas einfach wie:

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

nicht zu funktionieren scheint. Was wäre die einfachste Alternative?

Answer 1

Sie können ein neues Warteschlangenelement erstellen Sie die Klasse entfernen zu tun:

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

Oder mit der dequeue Methode:

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

Der Grund, warum Sie anrufen müssen next oder dequeue soll jQuery wissen lassen, dass Sie mit diesem in der Warteschlange befindlichen Element fertig sind und dass es mit dem nächsten fortfahren sollte.

Answer 2

Verzögerung wird in einer Warteschlange ausgeführt. und soweit ich weiß, ist css manipulation (anders als durch animate) nicht in der reihe.

Answer 3

AFAIK Die Delay-Methode funktioniert nur für numerische CSS-Modifikationen.

Für andere Zwecke kommt JavaScript mit einer setTimeout Methode:

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

Answer 4

Versuchen Sie folgendes:

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

Answer 5

jQuery CSS-Manipulation nicht die Warteschlange gestellt wird, aber man kann es in der 'fx' Warteschlange ausgeführt machen, indem Sie:

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

ganz das gleiche wie der Aufruf von setTimeout verwendet aber stattdessen jQuerys Warteschlangenmechanismus.

Answer 6

Natürlich wäre es einfacher, wenn Sie jQuery wie folgt erweitern:

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

nach, dass Sie diese Funktion wie addClass verwenden können:

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

Answer 7

Ich weiß, das dies ein sehr alt ist Post, aber ich habe ein paar der Antworten in eine jQuery-Wrapper-Funktion kombiniert, die Verkettung unterstützt. Hoffe, es profitiert jemand:

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

Und hier ist ein removeClass Wrapper:

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

Jetzt können Sie Sachen wie diese tun - 1sec warten, fügen .error, 3secs warten, entfernen .error:

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