jQuery Toggle 不显示和 animate.css 类
Posted
技术标签:
【中文标题】jQuery Toggle 不显示和 animate.css 类【英文标题】:jQuery Toggle Display none and animate.css classes 【发布时间】:2020-09-16 09:54:20 【问题描述】:我有一个最初被 display: none 在 css 中隐藏的 div。
<div id="myDiv" class="animate__animated">Div content Here</div>
我这有一个功能:
function togglefunc()
$('#myDiv').toggle().toggleClass('animate__slideInRight animate__slideInLeft');
我想要做的是切换显示:无和块,但也切换类:
animate__slideInRight and animate__slideInLeft
所以...
如果它被隐藏并且函数被调用,它会显示为 animate__slideInRight (animate.css 类) 效果
否则
如果它是可见的并且调用了函数,它会隐藏,效果为 animate__slideInLeft (animate.css 类)
我的函数在 animate__slideInRight 效果下显示良好,但是当我再次单击时,如果快速隐藏而没有效果。
我该如何解决这个问题?
【问题讨论】:
这能回答你的问题吗? Animate CSS display 【参考方案1】:它不起作用,因为 jquery 切换是立即完成的,而不是在属性更改触发的隐藏动画完成之后。
我会改为只使用 jQuery 来制作这个幻灯片效果:
function togglefunc()
$("#myDiv").animate(width: "toggle", 350);
#myDiv
overflow: hidden;
white-space: nowrap;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="togglefunc()">Toggle</button><br><br>
<div id="myDiv" class="animate__animated">Div content Here</div>
【讨论】:
【参考方案2】:遗憾的是,您无法为从 display: none
到 display: block
的元素设置动画。但是,您可以使用 visibility: hidden
和 visibility: visible
。
【讨论】:
以上是关于jQuery Toggle 不显示和 animate.css 类的主要内容,如果未能解决你的问题,请参考以下文章
jQuery动画隐藏和显示 hide() show() toggle()用法