我正在制作以下演示。如何根据 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>
最佳答案
我不确定您到底在寻找什么,但也许是这样的(每个点在出现后 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>
关于javascript - 连续删除先到元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48108527/