我有 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>
这是我的 fiddle :https://jsfiddle.net/gkq21ppt/3/
编辑:解决方案的想法
一个解决方案可能是,包装 div 并将它们设置为反转列。然后添加一个 JS 代码,将序列号设置为 flex 订单号到每个新的淡入 div 中。 但我不知道如何做到这一点,因为我的 JS 技能不高。
所以循环看起来像:
- 创建以 1 开头的数字作为变量
- 创建类宽度名称,例如“订单-[编号]”
- 在“.order-[number]”类中将 css 属性“order”设置为 [number]
- 在淡入之前将此类添加到循环中
- 淡出后移除这个类
或者?
最佳答案
您可以尝试使用 .prependTo()
这将做什么(我认为)是删除事件通知并将其添加回容器中的第一个位置。由于这种行为,flexbox 应该不是必需的。
请注意,这会更改 HTML 结构。
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>
关于javascript - 在第一个位置显示最后一个 fadeIn div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48300788/