如何在每次设置最后显示的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.2);
margin-bottom: 5px;
text-align: center;
padding-top: 20px;
display: none;/* hide initially so that fadIn() fadeOut() will work
}
这是我的小提琴:https://jsfiddle.net/gkq21ppt/3/
编辑:解决方案的想法
一个解决方案可能是,包装div并将它们设置为列反向.然后添加一个JS代码,它将一个序列号设置为flex命令编号,每个新的faded in 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.2);
margin-bottom: 5px;
text-align: center;
padding-top: 20px;
display: none;
/* hide initially so that fadIn() fadeOut() will work */
}