Question

我想添加一个类，它将元素呈现为特定颜色，然后将该颜色淡出回原始颜色。我认为以下内容可行（btn-warning将元素更改为我想要的颜色）

$('.myclass').addClass('btn-warning');
$('.myclass .btn-warning').fadeOut();

我做错了什么？

Answer 1

.fadeOut()淡出整个元素。它不会逐渐删除一个类。为此，请使用.animate()。如果它是您要设置动画的颜色（不是数字属性），那么您也需要some jQuery UI。

$('.myclass')
    .addClass('btn-warning')
    .animate({color: '#000000'}, 600);

Answer 2

您可以使用jQueryUI从一个类淡入另一个类。但首先我们需要解决您的选择器问题。您需要从选择器中删除空格：

$('.myclass.btn-warning')

空间告诉jQuery你正在寻找一个后代元素。删除空格表示目标元素应该具有两个类。

要转换回以前的颜色，.fadeOut()将无效。它隐藏了一个元素，直到它被隐藏。相反，include jQueryUI ^*并使用.removeClass()。 jQueryUI extends .removeClass()因此，如果您传递duration参数，它将从该类转换而不是立即将其删除。

$('.myclass').addClass('btn-warning');
$('.myclass.btn-warning').removeClass('btn-warning', 2000);

或者，更简洁：

$('.myclass').addClass('btn-warning').removeClass('btn-warning', 2000);

演示： http://jsfiddle.net/8afDP/

^*实际上，您需要的只是jQueryUI Effects Core。在the download page上，单击“取消选择所有组件”，然后向下滚动到“效果”并选择“效果核心”。然后单击“下载”按钮。

仅使用jQueryUI Effects Core进行演示： http://jsfiddle.net/8afDP/1/

Answer 3

你可以像这样链接：

$('.myclass').addClass('btn-warning').fadeOut();

Answer 4

错误的起源：

你应该在第二个选择器中删除一个额外的空格，因为它与.myclass相同的元素会获得一个额外的.btn-warning类：

$('.myclass').addClass('btn-warning');
$('.myclass.btn-warning').fadeOut();

或者你可以链接.addClass（）和.fadeOut（），因为它会对同一个元素起作用。

在jQuery中，我如何做一个addClass，然后是淡出？

4 个答案: