Fade-Effekt mit Timer?

Question

Wie setze ich einen Timer für einen Fade-Effekt? Sagen Sie, dass Text1 in 5 Sekunden ausgeblendet wird, dann wird Text2 angezeigt, dann wird er nach 5 Sekunden ausgeblendet, dann wird Text3 angezeigt. Ich bin nicht in jQuery kenntnisreich.

Say I 3 Texte haben:

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

Ich habe nur das:

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

Answer 1

Zunächst einmal reparieren Ihre ungültigen HTML und verschiedene Klassen verwenden (ids würde auch funktionieren, btw):

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

Dann diesen JavaScript-Code verwenden:

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

Demo: http://jsfiddle.net/ThiefMaster/hmRFB/1/

Answer 2

Sie können einfach Nest die Rückrufe. Die Funktion fadeOut benötigt 2 Parameter, nr1 gibt an, wie lange die Animation dauern soll, Parameter nr2 ist der Callback, der ausgeführt wird, wenn die Animation beendet ist.

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

Vielleicht ist dieser Animate Banner Text für Ihre Fragen geeignet. DEMO

HTML Code (Ihr HTML-Code korrekt ist, Sie effektiv Selektor erstellen):

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

JQuery-Code:

 

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