在沒有任何用戶事件的情況下連續更改div的html

Question

我試圖在沒有任何用戶事件的情況下連續更改html，只是時間。我試過這個：

$('#content').html('<p>Hello</p>').fadeIn(800).delay(1800).fadeOut(800); 
$('#content').delay(3400).html('<p>How are you?</p>').fadeIn(800).delay(1800).fadeOut(800); 
$('#content').delay(6800).html('<p>Great over here</p>').fadeIn(800); 

該延遲適用於效果，但顯示的文本總是最後一個。 我該怎麼做？

Answer 1

所提議的卡菲基恩謝卡爾，它很容易使用setTimeout()

$('#content').html('<p>Hello</p>'); 
setTimeout(function(){$('#content').html('<p>How are you?</p>');},3400); 
setTimeout(function(){$('#content').html('<p>Great over here</p>')},6800); 

Answer 2

你或許可以嘗試這樣的事情：

function addTimoutElement(htmlContent, delayMs, isFadeout){ 
    setTimeout(function(){ 
     $('#content').html(htmlContent).fadeIn(800); 
     if(isFadeout){ 
      $('#content').delay(1800).fadeOut(800); 
     } 
    }, delayMs); 
}  

$('#content').html('<p>Hello</p>').fadeIn(800).delay(1800).fadeOut(800); 

addTimoutElement('<p>How are you?</p>', 3400, true); 
addTimoutElement('<p>Great over here</p>', 6800, false);