帶定時器的淡入淡出效果？

Question

如何設置淡入淡出效果的計時器？假設text1將在5秒內淡出，然後text2將出現，然後5秒後淡出，然後出現text3。我不熟悉jQuery。

說我有3個文本：

<div class= "text1>Text 1</div> 
<div class= "text1>Text 2</div> 
<div class= "text1>Text 3</div> 

我只有這個：

$(".text1").fadeOut(5000); //now that a timers. 

Answer 1

首先，解決您的無效的HTML，並使用不同的類（IDS會的工作，也順便說一句）：

<div class="text1">Text 1</div> 
<div class="text2">Text 2</div> 
<div class="text3">Text 3</div> 

然後用這個JavaScript代碼：

function fade() { 
    $('.text1').fadeIn().delay(5000).fadeOut(); 
    $('.text2').delay(5000).fadeIn().delay(5000).fadeOut(); 
    $('.text3').delay(10000).fadeIn().delay(5000).fadeOut(fade); 
} 
fade(); 

演示：http://jsfiddle.net/ThiefMaster/hmRFB/1/

Answer 2

你可以簡單地嵌套的回調。函數fadeOut需要2個參數，nr1是動畫應該存在的時間，參數nr2是動畫完成時執行的回調。

http://jsfiddle.net/HULvL/

$(".text1").fadeOut(5000,function(){ 
// Text1 is outfaded.. 
    $(".text2").fadeOut(5000,function(){ 
     $(".text1").fadeIn(5000,function(){ 
      // Do more stuff 
     }) 
    }) 
});​ 

<div class= "text1">Text 1</div> 
<div class= "text2">Text 2</div> 
<div class= "text3">Text 3</div>​ 

Answer 3

也許這個動畫橫幅文本適合您的問題。 DEMO

HTML代碼（HTML代碼是正確的，你創造效益選擇）：

<div class= "text1">Text 1</div> 
<div class= "text1">Text 2</div> 
<div class= "text1">Text 3</div> 

jQuery代碼：

 

$(document).ready(function(){ 

    function AnimateBannerTeks(){ 
     var ct= 1;  
     $('.text1').each(function(){   
      var delay= 5000 * ct; 
      var $obj= $(this); 
      setTimeout(
      function(){ 
       $('.text1').fadeOut('fast'); 
       $obj.fadeIn(5000);    
      }, delay); 
      ct++; 
     }); 
    } 

    AnimateBannerTeks(); 
    setInterval(AnimateBannerTeks, 15000); 
});