animate - jQuery agregar/eliminar clase con fadeIn/Out

jquery hide animation

Question

Me gustaría aplicar un efecto fadeIn a una función addClass..y fadeOut para eliminarClass ...

¿Me puedes ayudar?

Este es mi codigo

$(''#loader''+idTurno).addClass(''loader'');

...

$(''#loader''+idTurno).removeClass(''loader'');

Answer 1

Debe agregar una duración al método remove / addClass:

$(''#loader''+idTurno).addClass(''loader'',500);
$(''#loader''+idTurno).removeClass(''loader'',500);

Answer 2

Fundirse:

$("#loader").fadeIn("slow", function() {
    $(this).addClass("loader");
});

Desaparecer:

$("#loader").fadeOut("slow", function() {
    $(this).removeClass("loader");
});

Como dijo otro usuario, es posible que desee estudiar el uso de toggleClass .

Answer 3

Hazlo simple :

$(''#loader''+idTurno).addClass(''loader'').fadeIn(1000);
$(''#loader''+idTurno).removeClass(''loader'').fadeIn(1000);

Answer 4

Otra forma de lograrlo, utilizando su código jQuery original, a través de CSS:

#loader {
  transition: opacity 500 ease-in-out;
}

Animación más suave, más fácil de mantener.

Answer 5

#loader {
  transition: all 0.9s ease-out 0s;
}