jquery using delay with loop

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++){ 
 
\t $("<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 использует за сценой) вы можете удалить пред один перед добавлением нового. Вы даже можете поместить эффект затухания на ней, если вы хотите вместо удалить, просто все, что вы хотите: р

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

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

 
}

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

 
</div>

пост, который может помочь вам понять код: other question