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>打开或关闭.
在你的演示代码中我改变了:
.hideMe {
display:none;
}
到
.hideMe {
opacity: 0;
}
这适用于缓动效果,但这会产生一个问题,即元素只占用空间。这不是超级优雅,但我在这里通过使用第二个“removeMe”类为您解决了这个问题:
https://jsfiddle.net/je7d9wgr/
奖金:
或者使用slideToggle(),例如:https: //jsfiddle.net/gL0vnhc2/
奖金2:
此代码检查复选框的当前状态,然后根据该值有条件地设置动画:
https://jsfiddle.net/fuzduh5g/