延迟后淡入/淡出附加的div

Question

我只是将我的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/

Answer 1

你必须在结果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>