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: nonedisplay: block 的元素设置动画。但是,您可以使用 visibility: hiddenvisibility: visible

【讨论】:

以上是关于jQuery Toggle 不显示和 animate.css 类的主要内容,如果未能解决你的问题,请参考以下文章

jQuery动画隐藏和显示 hide() show() toggle()用法

JQuery 的toggle() 方法

jquery单击按钮显示或隐藏

jquery的toggle动画效果显示隐藏

jQuery中toggle与slideToggle以及fadeToggle的比较

jQuery里面隐藏和显示效果怎么写?