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>

Answer 2

如果您使用setTimeout（.delay在场景后面使用），您可以在添加新的之前删除prev。如果你想要而不是删除，你甚至可以在它上面放一个淡出效果：p

var arr = ['First', 'Second', 'Third'];

for(var i=0; i<arr.length; i++){
  setTimeout(function(val) {
  if(val!==0){
    	$('.view').children()[0].remove();
    }
    $("<h3 style='display: none;'>"+arr[val] +"</h3>").appendTo('.view').fadeIn(500);
  }, 1000*i, i);
	

}

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

可能有助于您理解代码的帖子：other question

jquery使用延迟循环

2 个答案: