我只是将我的div存储在一个数组中,并在我添加它们之后将其删除。
我现在想要在延迟之后淡化和淡出每个div。
这是一个片段:
var arr = $(".notification");
function display(){
let rand = Math.floor(Math.random() * arr.length)
$("#result").append(arr.eq(rand))
arr = arr.not(":eq("+rand+")")
if(arr.length>0) createRandomInterval();
}
function createRandomInterval() {
setTimeout(display, 500 + Math.random() * 4000);
}
createRandomInterval()
.notification {
background-color: red;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
width: 200px;
margin-bottom: 10px;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hidden">
<div class="notification">object 1</div>
<div class="notification">object 2</div>
<div class="notification">object 3</div>
<div class="notification">object 4</div>
</div>
<div id="result"></div>
我试图添加
.fadeIn(400).delay(3000).fadeOut(400);
我的功能。但这只会让所有的div进入和退出。
我尝试的是,每一个div,在它附加的时刻,都会消失,并在3秒后消失。
这是我没有动画的小提琴:https://jsfiddle.net/0ydo3kvd/
答案 0 :(得分:2)
你必须在结果div中首先设置你的.notification
隐藏display:none
,然后将每一个添加到结果div后,你只需将display设置为flex,然后链接淡入淡出,延迟,和fadeOut。
见下面的工作片段:
var arr = $(".notification");
function display(){
let rand = Math.floor(Math.random() * arr.length)
let notfi = arr.eq(rand);
$("#result").append(notfi);
notfi.css("display","flex").fadeIn(400).delay(3000).fadeOut(400);
arr = arr.not(":eq("+rand+")")
if(arr.length>0) createRandomInterval();
}
function createRandomInterval() {
setTimeout(display, 500 + Math.random() * 4000);
}
createRandomInterval()
.notification {
background-color: red;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
width: 200px;
margin-bottom: 10px;
}
.hidden {
display: none;
}
#result .notification {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hidden">
<div class="notification">object 1</div>
<div class="notification">object 2</div>
<div class="notification">object 3</div>
<div class="notification">object 4</div>
</div>
<div id="result"></div>