Posso ritardare jQuery addClass?

Question

C'è un modo per ritardare lo addClass() di jQuery? Per esempio questo codice

$('#sampleID').delay(2000).fadeOut(500).delay(2000).addClass('aNewClass'); 

Quando carico della pagina, ha la classe 'aNewClass' già in id 'SampleID'. Come risolvere questo problema? Quello che voglio è che l'addClass si verifichi dopo aver terminato lo fadeOut().

Answer 1

Quello che voglio è l'addClass sarà accadrà dopo aver concluso la fadeOut().

È possibile utilizzare callback function to fadeOut come questo:

$('#sampleID').fadeOut(500, function(){ 
    $(this).addClass('aNewClass'); 
}); 

Answer 2

È necessario utilizzare le richiamate.

$('#sampleID').delay(2000).fadeOut(500,function(){ 
    $(this).delay(2000).addClass('aNewClass'); 
}); 

http://api.jquery.com/fadeOut/

Answer 3

Non si può fare questo con delay perché colpisce solo la coda effetti. Non "sospende" l'esecuzione del codice successivo se non è implementato utilizzando la coda.

Hai bisogno di fare questo con setTimeout:

$('#sampleID').delay(2000).fadeOut(500, function() { 
    setTimeout(function() { 
     $(this).addClass('aNewClass'); 
    }, 2000); 
}); 

Questo utilizza la complete callback di fadeOut e quindi imposta una funzione da eseguire 2 secondi in futuro.

Answer 4

Non si può rimandare direttamente una chiamata addClass, tuttavia è possibile se si avvolgerlo in una chiamata in coda, che prende una funzione come parametro come questo

$(this).delay(2000).queue(function(){$(this).addClass('aNewClass')}); 

Vedi questo post: jQuery: Can I call delay() between addClass() and such?

Answer 5

È inoltre possibile utilizzare setTimeout, con la transizione CSS:

setTimeout(function() { 
    $('#sampleID').addClass('aNewClass'); 
}, 2000); 

E il CSS

#sampleID { 
transition: opacity 1s ease; 
opacity: 0; 
} 

#sampleID.aNewClass { 
opacity: 1; 
}