我在使toggleClass的缓动属性工作时遇到问题.我在这个网站和其他网站上搜索过,但仍无法按预期工作.班级正在切换正常,但它不会顺利进出.
以下是我在项目中加载的(全部)脚本：
<!-- 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>打开或关闭.
解决方法
在您的演示代码中,我更改了：
.hideMe {
显示：无;
}
至
.hideMe {
不透明度：0;
}
这适用于缓动效果,但这会产生元素占用空间的问题.它不是超级优雅,但我在这里通过使用第二个’removeMe’类解决了这个问题：
https://jsfiddle.net/je7d9wgr/
奖金：
或者使用slideToggle(),例如：https://jsfiddle.net/gL0vnhc2/
奖金2：
此代码检查复选框的当前状态,然后根据值有条件地设置动画：
