代码之家 › 专栏 › 技术社区 › Referee Andy

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

jquery-animate css html jquery javascript

Referee Andy · 技术社区 · 7 年前

我只需将div存储在一个数组中,并在追加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/

1 回复 | 直到 7 年前

Bourbia Brahim 7 年前

您必须首先在结果div中设置 .notification 要隐藏 display:none ,然后在将每个选项添加到结果div后,只需将display设置为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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

3 月前

Alex · 在轻量级中同时解构和不解构变量

3 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

3 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

4 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

4 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

4 月前