我正在尝试创建类似通知消息的内容作为测试。

例如,我有5个div,这应该发生:


选择一个随机的div
淡入
显示/停止5秒钟
消退


此外,还有一些重要的事项:


允许同时显示2或3个div,具体取决于随机选择的时间
div中最后淡入的每次都应位于第一个位置
所有div最多应显示5分钟


我可以使用简单的CSS动画或jQuery淡入/停止/淡入淡出来伪造它,但这不是我的愿望。我几天来一直在尝试不同的方法,但是我没有得到解决方案-所以我要向你们寻求帮助。

目前,我有一个随机的div选择器。但是我不知道如何与淡入/淡出等等结合使用。

这是小提琴:http://jsfiddle.net/a9vjk968/2/

HTML:

<div id="first" class="notification">first</div>
<div id="second" class="notification">second</div>
<div id="third" class="notification">third</div>
<div id="fouth" class="notification">fourth</div>
<div id="fifth" class="notification">fifth</div>


的CSS

.notification {
  width: 200px;
  height: 50px;
  background-color: yellow;
  border: 1px solid rgba(0,0,0,0.2);
  margin-bottom: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}


JS

var random = Math.floor(Math.random() * $('.notification').length);
$('.notification').hide().eq(random).show();


谢谢大家!

最佳答案

这是您要做什么?由于它是一个通知选项卡,因此我创建了一个虚拟按钮来触发它。您应该对其进行一些调整,然后动态生成每个通知(PHP函数,AJAX调用等)。

在真正的Web应用程序方法中。如果您给您的通知一个父div浮动在某个地方(右下/左下或屏幕),那将是很好的。



$(document).ready(function() {
  $('#trigger').click(function() {
    var random = Math.floor(Math.random() * $('.notification').length);
    $('.notification').eq(random).fadeIn(5000).show().fadeOut();
  });
});

.notification {
  width: 200px;
  height: 50px;
  background-color: yellow;
  border: 1px solid rgba(0, 0, 0, 0.2);
  margin-bottom: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  position: relative;
  top: 0;
}

#trigger {
  padding: 20px;
  background-color: red;
  border: 1px solid #f0f0f0;
  cursor: pointer;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="trigger">CLICK HERE</a>
<div id="first" class="notification">first</div>
<div id="second" class="notification">second</div>
<div id="third" class="notification">third</div>
<div id="fouth" class="notification">fourth</div>
<div id="fifth" class="notification">fifth</div>

07-24 17:21
查看更多