/ / jQuery dodaj klasę, poczekaj, a następnie zmień tę klasę? - jquery

jQuery dodać klasę, czekać, a następnie zmienić tę klasę? - jquery

Muszę dodać klasę po kliknięciu elementu (np. Przejście), a następnie odczekać 1 sekundę i zmienić tę klasę (np. Ukończone przejście).

Próbowałem tego:

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

AKTUALIZACJA - Dlaczego poniższe nie działają? Kiedy odkomentuję alert, widzę, że strzela w odpowiednim czasie addClass i removeClass są ignorowane.

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

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

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

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

});

Odpowiedzi:

0 dla odpowiedzi № 1

Możesz użyć setTimeout (), tak jak poniżej:

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

$target.addClass("transition");

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

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

jsfiddle

Myślę, że problem z twoim kodem polega na tym, że próbujesz go użyć $(this) wewnątrz funkcji przekazywanej do setTimeout (), ale wewnątrz tej funkcji this nie odnosi się do elementu. Powyższy kod pozwala uniknąć tego poprzez zdefiniowanie $target zmienna.

Innym sposobem na poprawienie kodu byłoby użycie $.proxy() funkcja ustawiająca kontekst dla funkcji wywołania zwrotnego, jak poniżej:

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

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

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

6 dla odpowiedzi nr 2
$("p").css("color", "red").delay(1000).queue(

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

Przykład: http://jsbin.com/ocOkIfA/2/edit

Spójrz tutaj na jquery:

wprowadź opis obrazu tutaj

Domyślnie kolejka, do której można dodać opóźnienie, dotyczy tylko FX.

ustawienie podpory css nie jest animacją - dlatego nie używa kolejki.

więc to właśnie zrobiliśmy.