/ / jQuery Klasse hinzufügen, warten, dann diese Klasse ändern? - Frage

jQuery Klasse hinzufügen, warten, dann diese Klasse ändern? - Frage

Ich muss eine Klasse hinzufügen, wenn auf ein Element geklickt wird (z. B. Übergang), dann 1 Sekunde warten und diese Klasse ändern (z. B. Übergang beendet).

Ich habe das versucht:

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

UPDATE - Warum funktioniert Folgendes nicht? Wenn ich die Warnung auskommentiere, kann ich jedoch sehen, dass sie zum richtigen Zeitpunkt ausgelöst wird addClass und removeClass werden ignoriert.

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

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

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

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

});

Antworten:

0 für die Antwort № 1

Sie können setTimeout () folgendermaßen verwenden:

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

$target.addClass("transition");

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

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

jsfiddle

Ich denke, das Problem mit Ihrem Code ist, dass Sie versuchen, zu verwenden $(this) Innerhalb der Funktion übergeben Sie setTimeout (), aber innerhalb dieser Funktion this bezieht sich nicht auf das Element. Der obige Code vermeidet dies durch die Definition des $target Variable.

Eine andere Möglichkeit, Ihren Code zu reparieren, ist die Verwendung von $.proxy() Funktion, um den Kontext für die Rückruffunktion wie folgt festzulegen:

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

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

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

6 für die Antwort № 2
$("p").css("color", "red").delay(1000).queue(

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

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

Schau mal hier bei jquery:

Bildbeschreibung hier eingeben

Standardmäßig ist die Warteschlange, für die Sie eine Verzögerung hinzufügen können, nur für FX.

Das Setzen von CSS-Requisiten ist keine Animation - daher wird die Warteschlange nicht verwendet.

so haben wir es gemacht.