jQuery切换类动画

Question

我找到了这段代码：

$('li input:checked').click(function() {
    $(this).parent().parent().toggleClass("uncheckedBoxBGColor", 1000);
});

第一次单击元素时它能正常工作。它会淡化背景颜色，但当我再次单击它时，它会延迟1000毫秒，然后闪烁其他背景颜色。我希望有类名时动画运行，并且不仅在第一次单击时运行。

- Amar Syla

---

请提供您要切换的类的CSS。 - benestar

只是一个背景颜色，没有别的。 - Amar Syla

Answer 1

这在CSS转换中很容易实现：

JS:

$('li input:checked').click(function() {
    $(this).parent().parent().toggleClass("uncheckedBoxBGColor", 1000);
});

CSS：

.uncheckedBoxBGColor {
  background-color: orange;
  /*other properties*/
  transition: background-color .3s;
}

当类被打开时，这将添加效果，但是当它没有该类时，则没有定义过渡。因此，您可以像下面这样为所有<LI>元素打开此过渡：

CSS:

li { transition: background-color .3s; }

或者对于所有跟在 <LI><INPUT> 组合后面的 <INPUT> 元素：

li input { transition: background-color .3s; }

你已经理解了它的意思。

- Ozzy

---

谢谢，这个解决了。我只需要将jQuery中的duration参数更改为过渡时间，本例中为300。非常感谢。 - Amar Syla

Answer 2

jquery.toggleClass函数并不适用于淡入淡出。请参阅http://api.jquery.com/toggleClass/以获取更多详细信息。

如果您想要淡入/淡出背景颜色，请尝试使用CSS3过渡功能，就像Mozilla的网站上所解释的那样：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions。

- benestar

Answer 3

也许是因为你正在使用 "input:checked"。 尝试使用。

     $('li input[type=checkbox]').click(function () {
            $(this).parent().parent().toggleClass("uncheckedBoxBGColor", 1000);
        });

这对我有效。

- Hemadeus

---

这是不可能的，因为它在点击后更改了背景。 - benestar