jQuery toggleClass - 缓动不起作用

Question

我在获取toggleClass的缓动属性时遇到问题上类。我已经在这个网站和其他网站上进行了搜索，但仍然无法让它按预期工作。类切换得很好，但不能顺利地缓入或缓出。

这是我的代码示例:DEMO

以下是我在项目中加载的(所有)脚本:

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

我偷偷怀疑它与我正在加载的脚本有关(或者可能没有加载？)，因为我已经多次检查了代码并将其直接与 jQuery 文档进行了比较。我对 jQuery 也很陌生。

我想要完成的是类似于蛤壳效果的东西。在页面上加载 <div>根据从数据库获取的值显示或隐藏，并且该复选框用于切换 <div>打开或关闭。

Answer 1

在你的演示代码中我更改了:

.hideMe {
显示:无；
}

到

.hideMe {
不透明度:0；
}

这适用于缓动效果，但这会产生一个问题，即元素只占用空间。这不是 super 优雅，但我已经通过使用第二个“removeMe”类在这里解决了这个问题:

https://jsfiddle.net/je7d9wgr/

奖金:

或者使用slideToggle()，例如:https://jsfiddle.net/gL0vnhc2/

奖励2:

此代码检查复选框的当前状态，然后根据该值有条件地设置动画:

https://jsfiddle.net/fuzduh5g/