Эффект затухания с таймером?

Question

Как установить таймер для эффекта затухания? Скажем, текст1 исчезнет через 5 секунд, затем появится текст2, затем он исчезнет через 5 секунд, затем появится текст3. Я не осведомлен в 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 и использовать различные классы (идентификаторы будут работать, тоже, кстати):

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