jQuery Toggle 不显示和 animate.css 类答案

【问题标题】：jQuery Toggle Display none and animate.css classesjQuery Toggle 不显示和 animate.css 类
【发布时间】：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

标签： javascript jquery animate.css

【解决方案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。

【讨论】：