Czy mogę opóźnić addClass jQuery?

Question

Czy istnieje sposób na opóźnienie pracy z jQuery addClass()? Na przykład ten kod:

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

Kiedy ładuję stronę, ma ona klasę "aNewClass" już na id "sampleID". Jak rozwiązać ten problem? To czego chcę to addClass, stanie się po zakończeniu fadeOut().

Answer 1

Co chcę jest addClass będzie zdarzyć po jej zakończeniu wyciszenia().

Można użyć callback function to fadeOut takiego:

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

Answer 2

Powinieneś używać wywołań zwrotnych.

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

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

Answer 3

Nie można tego zrobić z delay ponieważ wpływa tylko kolejkę efektów. Nie "wstrzymuje" wykonywania późniejszego kodu, jeśli nie jest zaimplementowane za pomocą kolejki.

Trzeba to zrobić z setTimeout:

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

używa complete oddzwanianie fadeOut a następnie ustawia funkcję do wykonania 2 sekundy w przyszłości.

Answer 4

Nie można bezpośrednio opóźnić połączenia addClass, jednak można go owinąć jeśli w rozmowie kolejki, która zabiera funkcję jako parametr jak ten

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

Zobacz ten post: jQuery: Can I call delay() between addClass() and such?

Answer 5

można również użyć setTimeout, z CSS przejścia:

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

a CSS

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

#sampleID.aNewClass { 
opacity: 1; 
}