Question

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

例如，我有5个div，这就是应该发生的事情：

选择一个随机div
淡入
显示/停止5秒
淡出

此外还有一些重要的事情：

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

我可以用简单的css动画或jquery fadein / stop / fadeout伪装它，但这不是我的愿望。我现在正在尝试不同的事情，但我没有得到解决方案 - 所以我要求你们帮忙。

目前我有一个随机的div选择器。但我不知道如何结合fadein / fadeout等等。

这是小提琴：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();

先谢谢你们！

Answer 1

这是你想要做的吗？由于它是一个通知选项卡，我创建了一个触发它的虚拟按钮。你应该调整一下并动态生成每个通知（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>

Fadein div特定的时间，然后fadeoff

1 个答案: