javascript - jQuery toggle class animation

Question

I found this code:

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

It's working well, when a click the element for the first time. It fades the background color, but when I click it again, it delays for 1000 ms, and then flashes the other background color. I want it animated when it has the class, and when not, not only when clicked for the first time.

Answer 1

jquery.toggleClass 函数无论如何都不是为了淡化而设计的。有关详细信息，请参阅http://api.jquery.com/toggleClass/ 。

如果您想淡入/淡出背景颜色，请尝试使用 CSS3 过渡功能，如 Mozilla 方面所述：https ://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions 。

Answer 2

使用 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; }

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

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

你懂的。。

Answer 3

也许是因为您使用的是“ input:checked”

尝试使用

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

这对我有用。