Question

您能否请一看这个演示，让我知道如何根据5秒钟后的年龄逐渐淡出/退出每个.point？（fadeout older .point页面中存在的元素）

我需要做的是先取消，但如何跟踪元素的年龄？

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

Answer 2

我不确定你到底想要什么，但也许是这样的（每个点出现后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 3

添加另一个5秒的setInterval并删除第一个.point child.Check下面的工作示例。

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

关于首先来到元素的问题

3 个答案: