jQuery使用fadeIn / Out添加/删除类

Question

我想将一个fadeIn效果应用于addClass函数...并将fadeOut应用于removeClass ...

你能帮助我吗？

这是我的代码

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

...

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

Answer 1

淡入：

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

淡出：

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

正如另一位用户所说，您可能希望使用toggleClass。

Answer 2

另一种实现方法，使用原始的jQuery代码，CSS方式：

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

动画更流畅，更易于维护。

Answer 3

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

Answer 4

简单说明：

known-about

Answer 5

fadeIn类之后可能使用了setTimeout函数

 $('#loader').addClass('loader').fadeIn('slow');
 setTimeout(function(){  $('#loader').removeClass('loader'); }, 1000);

Answer 6

您应该为remove / addClass方法添加持续时间：

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