|
|
相关文章推荐
|
想发财的苹果 · Official Website of ...· 4 月前 · |
|
|
道上混的炒粉 · 东北限电，为什么走到最不该的一步？-科工力量 ...· 4 月前 · |
|
|
冷静的哑铃 · 侯德榜：科学救国的杰出化学家_ 闽都人杰_ ...· 5 月前 · |
|
|
有爱心的煎鸡蛋 · Microsoft Security ...· 6 月前 · |
|
|
逃跑的面包 · RGB 常用颜色对照表_大象灰rgb-CSDN博客· 1 年前 · |
从隐藏div开始，然后使用Animate.css fadeIn和fadeOut进行切换
问
从隐藏div开始，然后使用Animate.css fadeIn和fadeOut进行切换
EN
EN
Stack Overflow用户
提问于
2018-08-12 06:14:43
回答 1
查看 1.3K
关注 0
票数 2
我正在尝试使用display: none隐藏一个div，然后使用jQuery通过单击一个按钮从 Animation.css 切换fadeIn动画。
但是，当我尝试切换动画时，它可以工作，但隐藏它不会播放淡出动画。
下面是一个有效的 example
HTML：
代码语言：
javascript
运行
复制
<div class="window animated"></div>
<button style="margin: 100px;">Toggle Fade Window</button>CSS:
代码语言：
javascript
运行
复制
.window{
background: blue;
width: 200px;
height: 200px;
margin: 20px;
display: none;
}JS:
代码语言：
javascript
运行
复制
$(function() {
$("button").click(function() {
$(".window").toggleClass("fadeIn");
})谢谢!
EN
Stack Overflow用户
发布于 2018-08-12 09:11:46
有一些与您的代码相关的问题，以及您对
animate.css
库的误解：
-
如果从
fadeIn中删除div，它不会自动淡出，您必须添加类fadeOutin. -
fadeIn会将元素的opacity从0转换为1，因此在1样式中使用display: none时，它将不起作用。<代码>H213<代码>F214
这就是解决问题的方法：
-
如果在单击按钮时
div没有同时具有fadeIn和fadeOut类，这意味着当您第一次呈现视图时，div处于初始状态，因此您需要在中添加fadeIn类。 -
如果在单击按钮时，div确实有<代码>D24但<
div>D25类，这意味着以前的div已经淡入，现在需要淡出。因此，只需从div中删除fadeIn并添加fadeOut类。 -
最后一种情况与上面的情况相反，如果在单击按钮时
div具有fadeOut类，则需要添加fadeIn并删除fadeOut。<代码>H235<代码>F236
以下是代码
代码语言：
javascript
运行
复制
$(function() {
$("button").click(function() {
if ($(".window").hasClass("fadeIn")) {
// if the div has fadeIn class, remove it and add fadeOut
$(".window").toggleClass("fadeIn").toggleClass("fadeOut")
else if ($(".window").hasClass("fadeOut")) {
// if the div has fadeOut class, remove it and add fadeIn
$(".window").toggleClass("fadeOut").toggleClass("fadeIn")
} else {
// if the div has neither of fadeIn nor fadeOut, add fadeIn class in
$(".window").toggleClass("fadeIn")
})
代码语言：
javascript
运行
复制
.window{
background: blue;
width: 200px;
height: 200px;
margin: 20px;
推荐文章
|
|
逃跑的面包 · RGB 常用颜色对照表_大象灰rgb-CSDN博客 1 年前 |