web-dev-qa-db-fra.com

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

Quelque chose d'aussi simple que:

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

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

jquerydelay
167
serg

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

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

Ou en utilisant la méthode dequeue :

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

Si vous devez appeler next ou dequeue, vous devez indiquer à jQuery que vous avez terminé avec cet élément en file d'attente et qu'il doit passer au suivant.

344
PetersenDidIt

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);
47
Jasper

la manipulation CSS de jQuery n'est pas en file d'attente, mais vous pouvez la faire exécuter à l'intérieur de la file d'attente 'fx' en faisant:

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

Même chose que d'appeler setTimeout mais d'utiliser plutôt le mécanisme de file d'attente de jQuery.

5
warpdesign

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);
3
user6322596

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

2
prodigitalson

Essaye ça:

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

delay ne fonctionne pas avec 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 d’inclure tout dans une méthode setTimeOut:

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