jQuery: Puis-je appeler delay () entre addClass () et autres?

Quelque chose d'aussi simple que:

$("#div").addClass("error").delay(1000).removeClass("error");

ne semble pas fonctionner. Quelle serait l'alternative la plus simple?

Vous pouvez créer un nouvel élément de file d'attente pour supprimer la classe:

$("#div").addClass("error").delay(1000).queue(function(next){
    $(this).removeClass("error");
    next();
});

Ou en utilisant la méthode de file d'attente :

$("#div").addClass("error").delay(1000).queue(function(){
    $(this).removeClass("error").dequeue();
});

La raison pour laquelle vous devez appeler nextou dequeueest pour faire savoir à jQuery que vous avez terminé avec cet élément en file d'attente et qu'il doit passer au suivant.

AFAIK la méthode de délai ne fonctionne que pour les modifications CSS numériques.

À d'autres fins, JavaScript est fourni avec une méthode setTimeout:

window.setTimeout(function(){$("#div").removeClass("error");}, 1000);

Je sais que c'est un très vieux message, mais j'ai combiné quelques-unes des réponses dans une fonction wrapper jQuery qui prend en charge le chaînage. J'espère que cela profite à quelqu'un:

$.fn.queueAddClass = function(className) {
    this.queue('fx', function(next) {
        $(this).addClass(className);
        next();
    });
    return this;
};

Et voici un wrapper removeClass:

$.fn.queueRemoveClass = function(className) {
    this.queue('fx', function(next) {
        $(this).removeClass(className);
        next();
    });
    return this;
};

Maintenant, vous pouvez faire des choses comme ça - attendez 1 seconde, ajoutez .error, attendez 3 secondes, supprimez .error:

$('#div').delay(1000).queueAddClass('error').delay(2000).queueRemoveClass('error');

La manipulation CSS de jQuery n'est pas mise en file d'attente, mais vous pouvez l'exécuter dans la file d'attente 'fx' en faisant:

$('#div').delay(1000).queue('fx', function() { $(this).removeClass('error'); });

Tout à fait la même chose que d'appeler setTimeout mais utilise à la place le mécanisme de file d'attente de jQuery.

Bien sûr, ce serait plus simple si vous étendez jQuery comme ceci:

$.fn.addClassDelay = function(className,delay) {
    var $addClassDelayElement = $(this), $addClassName = className;
    $addClassDelayElement.addClass($addClassName);
    setTimeout(function(){
        $addClassDelayElement.removeClass($addClassName);
    },delay);
};

après cela, vous pouvez utiliser cette fonction comme addClass:

$('div').addClassDelay('clicked',1000);

Le délai fonctionne sur une file d'attente. et pour autant que je sache, la manipulation css (autre que via animate) n'est pas mise en file d'attente.

delayne fonctionne pas sur aucune fonction de file d'attente, nous devrions donc utiliser setTimeout().

Et vous n'avez pas besoin de séparer les choses. Tout ce que vous avez à faire est de tout inclure dans une setTimeOutméthode:

setTimeout(function () {
    $("#div").addClass("error").delay(1000).removeClass("error");
}, 1000);

Essaye ça:

function removeClassDelayed(jqObj, c, to) {    
    setTimeout(function() { jqObj.removeClass(c); }, to);
}
removeClassDelayed($("#div"), "error", 1000);

Essayez cette simple fonction de flèche:

setTimeout( () => { $("#div").addClass("error") }, 900 );