javascript – jQuery切换类动画

2023年8月24日 173次阅读

我找到了这段代码：

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

当第一次单击元素时,它运行良好.它会淡化背景颜色,但是当我再次单击它时,它会延迟1000毫秒,然后闪烁其他背景颜色.我希望它在有类时动画,如果不是,不仅在第一次点击时.

最佳答案 CSS转换很容易：

JS：

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

CSS：

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

这将在类打开时添加效果,但是当它没有该类时,则没有定义过渡.因此,您可以为ALL< LI>启用此转换.像这样的元素：

CSS：

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

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

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

你明白了……

点赞