/ / jQuery adicionar classe, aguarde, em seguida, alterar essa classe? - jquery

jQuery adicionar classe, aguarde, em seguida, alterar essa classe? - jquery

Eu preciso adicionar uma classe quando um elemento é clicado (por exemplo, transição), então espere por 1 segundo e mude essa classe (por exemplo, transição concluída).

Eu tentei isso:

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

ATUALIZAÇÃO - Por que o seguinte não funciona? Quando descomenteço o alerta, vejo que ele dispara no horário correto addClass e removeClass são ignorados.

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

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

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

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

});

Respostas:

0 para resposta № 1

Você pode usar setTimeout (), assim:

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

$target.addClass("transition");

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

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

jsfiddle

Eu acho que o problema com o seu código é que você está tentando usar $(this) dentro da função que você passa para setTimeout (), mas dentro dessa função this não se refere ao elemento. O código acima evita que definindo o $target variável.

Outra maneira de corrigir seu código seria usar o $.proxy() função para definir o contexto para a função de retorno de chamada, como este:

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

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

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

6 para resposta № 2
$("p").css("color", "red").delay(1000).queue(

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

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

Olhe aqui no jquery:

insira a descrição da imagem aqui

Por padrão, a fila para a qual você pode adicionar atraso é somente para FX.

configuração css prop não é uma animação - portanto, não está usando a fila.

então é isso que fizemos.