Puis-je retarder jQuery addClass?

Est-il un moyen de retarder la addClass() de jQuery? Par exemple ce code

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

Lorsque je charge la page, il a la classe 'aNewClass déjà sur id 'sampleID'. Comment résoudre ce problème? Ce que je veux, c'est le addClass va se passer après la fin de la fadeOut().

OriginalL'auteur Ryan | 2011-01-29

  1. 12

    Ce que je veux, c'est le addClass va
    arriver après avoir terminé le fadeOut().

    Vous pouvez utiliser fonction de rappel pour fadeOut comme ceci:

    $('#sampleID').fadeOut(500, function(){
  $(this).addClass('aNewClass');
});
    Vous n'avez pas remplacé le non-fonctionnelle appel à delay.
    Qui ne compte pas dans le code mais grâce fait 🙂

    OriginalL'auteur Sarfraz

  2. 21

    Vous ne pouvez pas retarder une addClass appel, cependant vous pouvez, si vous l'envelopper dans une file d'attente d'appel, qui prend une fonction en tant que paramètre comme ceci

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

    Voir ce post: jQuery: puis-je appeler delay() entre addClass() et tel?

    OriginalL'auteur Dave

  3. 1

    Vous ne pouvez pas faire cela avec delay, car il affecte uniquement les effets de la file d'attente. Il n'a pas de "suspendre" l'exécution de code plus tard si elle n'est pas implémentée à l'aide de la file d'attente.

    Vous besoin de faire cela avec setTimeout:

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

    Il utilise le complete rappel de fadeOut et puis définit une fonction pour exécuter les 2 secondes dans le futur.

    OriginalL'auteur lonesomeday

  4. 0

    Vous devez utiliser les callbacks .

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

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

    OriginalL'auteur Arshdeep

  5. 0

    Vous pouvez également utiliser setTimeout avec le CSS transition :

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

    Et le CSS

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

#sampleID.aNewClass {
opacity: 1;
}

    OriginalL'auteur brandozz