jQuery: Posso chiamare delay() tra addClass() e così via?

Question

Qualcosa di semplice come:

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

non sembra funzionare. Quale sarebbe l'alternativa più semplice?

Answer 1

È possibile creare un nuovo elemento della coda per fare la tua rimozione della classe:

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

sia utilizzando il metodo dequeue:

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

Il motivo per cui è necessario chiamare next o dequeue consente a jQuery di sapere che hai finito con questo elemento in coda e che dovrebbe passare a quello successivo.

Answer 2

Il ritardo funziona su una coda. e per quanto ne so la manipolazione di css (oltre che tramite animate) non viene accodata.

Answer 3

AFAIK il metodo di ritardo funziona solo per le modifiche numeriche CSS.

destinato ad altri usi JavaScript viene fornito con un metodo setTimeout:

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

Answer 4

Prova questo:

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

Answer 5

manipolazione CSS di jQuery non è in coda, ma si può rendere eseguito all'interno della coda 'fx' facendo:

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

Piuttosto stessa cosa di setTimeout chiama ma usa invece il mecanismo delle code di jQuery.

Answer 6

Certo che sarebbe più semplice se si estende jQuery in questo modo:

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

dopo che è possibile utilizzare questa funzione come addClass:

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

Answer 7

So che questo è un antichissimo post ma ho combinato alcune delle risposte in una funzione wrapper jQuery che supporta il concatenamento. La speranza avvantaggia qualcuno:

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

Ed ecco un wrapper removeClass:

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

ora si può fare cose come questa - attendere 1 secondo, aggiungere .error, attendere 3secs, rimuovere .error:

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