ritardo () e fadeOut () non ritardare attr () nella coda

Question

cosa c'è di sbagliato in questo codice? Sto cercando di ottenere questo effetto: fadeOut(500) e attr('class','myClass') ritardato da 600 millisecs .. poi delay(600) di nuovo, e fadeIn(500). I ritardi si verificano correttamente, ma il attr() non vengono ritardate, spara quando #myDiv è ancora svanendo! : '(

$('#myDiv').fadeOut(500)
           .delay(600)
           .attr('class','myClass')
           .delay(600)
           .fadeIn(500);  

Answer 1

Il .delay() riguarda solo la coda di animazione o fx (a meno che non si specifica una coda diversa in particolare). Tenete a mente che il concatenamento e la messa in coda sono 2 concetti nettamente differenti, concatenamento continua l'uso dello stesso set di jQuery, ma che è una cosa completamente diversa rispetto a qualsiasi code eventi su elementi in quel set.

Per avere la .attr() chiamata interessato, si deve aggiungere come un callback per la stessa coda utilizzando .queue() , in questo modo:

$('#myDiv').fadeOut(500)
           .delay(600)
           .queue(function(next) { $(this).attr('class','myClass'); next(); })
           .delay(600)
           .fadeIn(500); 

Si noti inoltre ci sono .addClass() , .removeClass() e .toggleClass() disponibili che possono rendere questo un po 'più pulito:)