javascript - 连续删除先到元素

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>