jQueryでテキスト関数を遅らせる方法

Question

jQueryでtext（）関数を使用して、divにあるテキストを別のテキストに変更しようとしています。それはうまくいっていますが、速すぎます。とにかくこのtext（）関数を遅らせて、変更を正しく表示できるかどうかを確認してください。ここにコードがあります。それを見てください。事前に感謝:)あなたが遅延目的のためにsetTimeout機能を使用することができます

setTimeout(function(){ 

$('.main').text("Changed title!"); 

},1000); 

Answer 1

$('.main .title').text("Changed title!"); 
 
$('.main .description').text("Changed Description");

.main { 
 
    background-color: orange; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <div class="title"> 
 
    <p>This title text should be changed</p> 
 
    </div> 
 
    <div class="description"> 
 
    <p>This description should als be changed</p> 
 
    </div> 
 
</div>

Answer 2

使用タイムアウト機能..

< script type="text/javascript"> 
     setTimeout(function() { 
      $('.main .title').text("Changed title!"); 
      $('.main .description').text("Changed Description"); 
     }, 1000); 
</script> 

Answer 3

$('.main .title').delay(3000).text("Changed title!"); 

ただ、jQueryの遅延機能を試してみてください。それは動作するはずです。それ以外の場合は、JavaScriptのネイティブ関数setTimeOutを使用することもできます。

Answer 4

$('.main .title').fadeOut(function() { 
    $(this).text("Changed title!").fadeIn(); 
}); 

OR

$('.main .title').fadeOut(<delay-here-in-milliseonds>, function() { 
     $(this).text("Changed title!").fadeIn(); 
    }); 

これを試してみてください。 fadeInとfadeOut関数を使用します。

Answer 5

jquery setTimeoutを使用してください。

$('.main .title').data("timeout", setTimeout(function() { 
     $('.main .title').text("Changed title!"); 
    }, 2000)); 
    $('.main .description').data("timeout", setTimeout(function() { 
    $('.main .description').text("Changed Description"); 
    }, 4000)); 

ワーキングフィドル：それは働いたFiddle