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

Question

我想在addClass函数中应用fadeIn效果...并且在removeClass中使用fadeOut...

你能帮我吗？

这是我的代码

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

...

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

- Swim89

Answer 1

淡入：

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

逐渐消失：

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

就像另一个用户所说，你可能希望考虑使用toggleClass。

- What have you tried

---

@minitech，我尝试了上面的解决方案，但当第二个函数运行（fadeout）时，元素完全消失。在我的情况下，这个元素是下拉菜单（select）。我注意到的是，被“隐藏”起来的元素会应用display:none的样式。为什么会这样呢？ - Dimitris Papageorgiou

阅读 fadeOut() 的文档。它讨论了在不透明度设置为0后，显示属性会设置为 display: none - http://api.jquery.com/fadeout/ - What have you tried

很不幸，我被禁止提出新问题了。我会看看我能做什么。无论如何，谢谢。 - Dimitris Papageorgiou

不是解决方案！它隐藏了该项，而不仅仅是删除类。 - Michael Tallino

你可以使用这个选项，但是只需添加另一个div来覆盖在#loader上，其中包含你想要的CSS样式。淡入淡出该div将创建你想要的效果。 - Matt Pierce

Answer 2

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

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

动画更流畅，易于维护。

- enguerranws

---

对我来说没有任何作用。 - Viktor Joras

你需要使用一个额外的类，就像提问者发布的那样: .loader，它将设置透明度为0或1。然后使用JS切换这个类。 - enguerranws

Answer 3

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

- Hil

Answer 4

也许可以在 fadeIn 类之后使用 setTimeout 函数。

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

- Omair

---

这对我很有效。我尝试将.fadeOut添加到.removeClass中，但正如上面所述，在淡出结束时它将选择器设置为display none，因此我只让它淡入并被删除。 - John Contarino

Answer 5

使它简单：

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

- Sulung Nugroho

---

这会使整个DIV淡入或淡出，而不仅仅是该类。 - Koby Douek

Answer 6

你应该在 remove/addClass 方法中添加一个持续时间：

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

- imfromthepast

---

这个回答是明显错误的，如 https://api.jquery.com/addClass/ 所示，$.addClass()或$.removeClass()方法没有duration属性。 - DavidScherer

如果我们只使用jQuery，那么@DavidScherer的陈述是正确的。然而，如果OP使用jQueryUI，则上述陈述是正确的，因为jQueryUI（虽然在添加这样一个小功能时相当笨重）确实支持以持续时间淡入和淡出一个类。http://api.jqueryui.com/addClass/ - Dennis Bartlett

+1 这是最好、最简单的答案。它不仅完美地工作，甚至还有一个“缓动”参数，用于线性或摆动过渡。很遗憾这个答案被淹没了。@DennisBartlett - horace