Question

我有10个div，随机时间显示。

如何在每次设置最后显示的div（排名第一的位置）而不是div的html顺序？

这是我的代码：

var myVar;    
function showDiv(){
  var random = Math.floor(Math.random() * $('.notification').length);
  $('.notification').eq(random).fadeIn(200).delay(3000).fadeOut(200);
  createRandomInterval();
}

function createRandomInterval(){
  setTimeout(showDiv, 500+ Math.random() * 4000);
}
$(document).ready(function(){
    createRandomInterval();
});

.notification {
  width: 200px;
  height: 50px;
  background-color: yellow;
  border: 1px solid rgba(0,0,0,0.2);
  margin-bottom: 5px;
  text-align: center;
  padding-top: 20px;
  display: none;/* hide initially so that fadIn() fadeOut() will work
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="notification">1</div>
<div class="notification">2</div>
<div class="notification">3</div>
<div class="notification">4</div>
<div class="notification">5</div>
<div class="notification">6</div>
<div class="notification">7</div>
<div class="notification">8</div>
<div class="notification">9</div>
<div class="notification">10</div>

这是我的小提琴：https://jsfiddle.net/gkq21ppt/3/

编辑：解决方案的想法

解决方案可以是，包装div并将它们设置为列反向。然后添加一个JS代码，它将一个序列号设置为flex命令编号，每个新的faded in div。但我不知道如何做到这一点，我的JS技能很低。

所以循环看起来像：

创建以1开头的数字作为变量
创建类宽度名称，例如“命令 - [数字]”
in“。order- [number]”class set css property“order”to [number]
在
淡出后删除此类

或者

Answer 1

您可以尝试使用.prependTo()

这样做（我认为）是删除活动通知并将其添加回容器，位于第一个位置。由于这种行为，不一定需要flexbox。

请注意，这会更改HTML结构。

updated fiddle

var myVar;

function showDiv() {
  var random = Math.floor(Math.random() * $('.notification').length);
  $('.notification').eq(random).prependTo('.container').fadeIn(200).delay(3000).fadeOut(200);
  createRandomInterval();
}

function createRandomInterval() {
  setTimeout(showDiv, 500 + Math.random() * 4000);
}
$(document).ready(function() {
  createRandomInterval();
});

.notification {
  width: 200px;
  height: 50px;
  background-color: yellow;
  border: 1px solid rgba(0, 0, 0, 0.2);
  margin-bottom: 5px;
  text-align: center;
  padding-top: 20px;
  display: none;
  /* hide initially so that fadIn() fadeOut() will work */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="notification">1</div>
  <div class="notification">2</div>
  <div class="notification">3</div>
  <div class="notification">4</div>
  <div class="notification">5</div>
  <div class="notification">6</div>
  <div class="notification">7</div>
  <div class="notification">8</div>
  <div class="notification">9</div>
  <div class="notification">10</div>
</div>

在第一个位置显示最后一个fadeIn div

1 个答案: