连续删除先到先得元素

Question

我正在做下面的演示。如何在 5 秒后根据其年龄淡出/停用每个.point？(淡出页面中现有元素之间的最旧.point元素(。

我需要做的是删除先到先得，但我如何跟踪元素的年龄？

setInterval(function() {
  var color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
  $("#points").append('<div class="point" style="background:' + color + '"></div>');
}, 3000);

.point {
  float: left;
  margin: 15px;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="points"></div>

Answer 1

我不确定你到底在寻找什么，但也许是这样的(每个点在出现后 5 秒(下一个点出现后 2 秒(淡出(：

setInterval(function() {
  var color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16).padStart( 6, '0' );
  $("#points").append(
    $('<div class="point" style="background:' + color + '"></div>')
    .delay( 5000 ).fadeOut( function ( ) { 
      $(this).show().css( 'visibility', 'hidden' );
    } )
  );
}, 3000);

.point {
  float: left;
  margin: 15px;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="points"></div>

Answer 2

您可以使用 css 动画，延迟 5 秒，然后淡入淡出。

setInterval(function() {
  var color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
  $("#points").append('<div class="point" style="background:' + color + '"></div>');
}, 3000);

.point {
  float: left;
  margin: 15px;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  animation: fade 1s 5s forwards;
  opacity:1;
}
@keyframes fade{
  0%{
    opacity:1;
  }
  100%{
    opacity:0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="points"></div>

Answer 3

添加另一个 setInterval 5 秒并删除第一个 .point 子项。检查下面的工作示例。

setInterval(function() {
  var color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
  $("#points").append('<div class="point" style="background:' + color + '"></div>');
}, 3000);
setInterval(function() {
  $("#points .point:first-child").remove();
}, 5000);

.point {
  float: left;
  margin: 15px;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="points"></div>