javascript - jquery 使用带有循环的延迟

Question

我有一个包含 3 个项目的数组。我想显示每个项目之间有延迟并删除前一个项目。我的代码适用于显示每一项，但无法删除前一项。如果我在每个循环的末尾添加 html('') ..它将在由于延迟而显示项目之前删除所有内容。这是 jsfiddle https://jsfiddle.net/qawzzzjz/

<div class='view'>
</div>

var arr = ['First', 'Second', 'Third'];

for(var i=1; i<arr.length+1; i++){
$("<h3 style='display: none;'>"+arr[i-1]+"</h3>").appendTo('.view').delay(1000*i).fadeIn(500);

}

我也尝试了这段代码，但它只显示第三项

var arr = ['First', 'Second', 'Third'];

for(var i=1; i<arr.length+1; i++){
$('.view').html("<h3>"+arr[i-1]+"</h3>").delay(1000*i);;
}

Answer 1

只需在行尾添加 FadeOut 即可。请参阅示例:

var arr = ['First', 'Second', 'Third'];

for(var i=1; i<arr.length+1; i++){
	$("<h3 style='display: none;'>"+arr[i-1]+"</h3>").appendTo('.view').delay(1000*i).fadeIn(500).fadeOut(500);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = 'view'>
  
</div>