如何在jQuery中延遲文本函數

Question

我試圖通過在jQuery中使用text（）函數將div中的文本更改爲另一個文本。它工作正常，但速度太快。無論如何推遲這個文本（）函數，以便我可以正確查看更改。這是代碼。請看看它。感謝提前:)

$('.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 1

可以使用setTimeout功能延遲的目的。

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

Answer 2

使用超時功能..

setTimeout(function(){ 

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

},1000); 

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