/ / jQuery ajouter une classe, attendre, puis changer cette classe? - jquery

jQuery add class, attends, puis change cette classe? - jquery

Je dois ajouter une classe lorsqu'un élément est cliqué (par exemple, transition), puis attendre 1 seconde et changer cette classe (par exemple, transition terminée).

J'ai essayé ceci:

$(this).addClass("transition").delay(1000).addClass("active");

MISE À JOUR - Pourquoi les éléments suivants ne fonctionnent-ils pas? Lorsque je décommente l'alerte, je peux voir qu'elle se déclenche au bon moment cependant addClass et removeClass sont ignorés.

$(".target").click(function() {

$(this).addClass("transition");

$(".target").not(this).removeClass("active transition");

setTimeout(function(){
$(this).removeClass("transition");
$(this).addClass("active");
//  alert("test");
},300);

});

Réponses:

0 pour la réponse № 1

Vous pouvez utiliser setTimeout (), comme ceci:

$(".target").click(function () {
var $target = $(this);

$target.addClass("transition");

$(".target").not(this).removeClass("active transition");

setTimeout(function () {
$target.removeClass("transition").addClass("active");
}, 1000);
});

jsfiddle

Je pense que le problème avec votre code est que vous essayez d'utiliser $(this) à l'intérieur de la fonction que vous passez à setTimeout (), mais à l'intérieur de cette fonction this ne fait pas référence à l'élément. Le code ci-dessus évite cela en définissant le $target variable.

Une autre façon de corriger votre code serait d'utiliser le $.proxy() pour définir le contexte de la fonction de rappel, comme ceci:

$(".target").click(function () {
$(this).addClass("transition");

$(".target").not(this).removeClass("active transition");

setTimeout($.proxy(function () {
$(this).removeClass("transition").addClass("active");
}, this), 1000);
});

6 pour la réponse № 2
$("p").css("color", "red").delay(1000).queue(

function (aaa)
{
$(this).css("color", "green");
$(this).dequeue(); //<---- or  aaa();  , will work also
}).Continue...

Exemple : http://jsbin.com/ocOkIfA/2/edit

Regardez ici sur jquery:

entrer la description de l'image ici

Par défaut, la file d'attente pour laquelle vous pouvez ajouter un retard est uniquement pour FX.

définir css prop n'est pas une animation - il n'utilise donc pas la file d'attente.

c'est ce que nous avons fait.