jQuery：在状态和类之间切换答案

【问题标题】：jQuery: switch between states & classesjQuery：在状态和类之间切换
【发布时间】：2015-10-01 01:30:00
【问题描述】：

我得到了hidden-input 和display: none 和opacity: 0。动画按计划在label 点击时发生。

但是，我实际上需要它作为切换功能，这样如果 checkbox 未选中，它也可以用相同的动画隐藏。

我认为我的注释代码会起作用，但如果您取消注释，input 将永远不会显示。

如何修改 JS/CSS，使 CSS 不透明动画在显示和隐藏时都发生，并在 hidden 和 visible 状态之间正确切换？

编辑：这里必须让display: none 处于隐藏状态。

【问题讨论】：

fadeToggle 完全符合您的要求！它在第一次调用时隐藏带有动画的元素，在第二次调用时再次显示它..
@RicoOcepek 使用 jQuery 动画 CSS 可以做什么......它请求动画帧和完全过时的动画方式，新手在前端使用的东西
@knitevision 大约 25% 的浏览器不支持您的 CSS3 解决方案！如果您想要一个在所有主要客户上运行完全相同的网站，jQuery 仍然是您的最佳选择。
@RicoOcepek 谁说我关心 25% 的浏览器？ =) 究竟是什么不支持..？
@knitevision 我只是假设 :) 10 之前的 IE 版本不支持 CSS3 过渡..

【解决方案1】：

查看这个工作版本：http://jsfiddle.net/n4Lep9jf/

有两个变化：

1) 您正在进行各种 CSS 更改并将类设置为 active，甚至在检查它是否已经处于活动状态之前。因此，代码中的 if 语句将始终返回 true，从而删除那些 CSS 更改。相反，应该在 if 语句的 else 块中将类设置为活动的（以及随附的 JS 行）。

2) 我将$toggler 设置为引用复选框本身，并将click 处理程序更改为change。我发现标签上的click 事件触发了两次，这解决了这个问题。我对点击处理程序触发两次这一事实感到惊讶，但我猜这是链接到复选框的标签的标准行为。

【讨论】：