telto () e fadeout () não atrasam attr () na fila

Question

O que há de errado neste código? Estou tentando obter esse efeito: fadeOut(500) e attr('class','myClass') atrasado por 600 milisecs .. então delay(600) denovo e fadeIn(500). Os atrasos acontecem corretamente, mas o attr() não está sendo atrasado, ele dispara quando #myDiv ainda está desaparecendo! : '(

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

Answer 1

o .delay() afeta apenas a animação ou fx fila (a menos que você especifique uma fila diferente especificamente). Lembre -se de que o encadeamento e a fila são 2 conceitos distintos, o encadeamento continua o uso do mesmo conjunto de jQuery, mas isso é uma coisa diferente de qualquer uma das filas de eventos sobre elementos nesse conjunto.

Para ter o .attr() Chamada afetada, você deve adicioná -lo como um retorno de chamada à mesma fila usando .queue(), assim:

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

Observe também que existem .addClass(), .removeClass() e .toggleClass() Métodos disponíveis que podem tornar isso um pouco mais limpo :)