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);