FadeIn/out 延迟后追加 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 秒后淡出。

这是我的 fiddle 没有动画：https://jsfiddle.net/0ydo3kvd/

Answer 1

您必须首先在结果 div 中将您的 .notification 设置为隐藏 display:none ，然后将每个添加到结果 div 之后，您只需设置显示为 flex ，然后链式 fade 、 delay 和 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>

FadeIn/out 延迟后追加 div

FadeIn/out appended div after delay

html

javascript

css

jquery

jquery-animate