jQuery toggleClass - 缓动不起作用

And*_*Fox 6 jquery toggleclass

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>
Run Code Online (Sandbox Code Playgroud)

我有一个偷偷摸摸的怀疑它与我正在加载的脚本(或者可能没有加载?)有关,因为我已多次查看代码并将其直接与jQuery文档进行比较.我也是jQuery的新手.

我想要完成的是类似于翻盖效果的东西.在页面加载时,<div>根据从数据库中获取的值显示或隐藏,复选框用于切换<div>打开或关闭.

Lun*_*ter 4

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

.hideMe { display:none; }

.hideMe { opacity: 0; }

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

https://jsfiddle.net/je7d9wgr/

奖金:

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

奖金2:

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

https://jsfiddle.net/fuzduh5g/