How to set a timer for a fade effect? Say text1 will fade out in 5 seconds, then text2 will appear, then it will fade out after 5 seconds, then text3 will appear. I'm not knowledgeable in jQuery.

Say I have 3 texts:

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

I have only this:

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

How to set a timer for a fade effect? Say text1 will fade out in 5 seconds, then text2 will appear, then it will fade out after 5 seconds, then text3 will appear. I'm not knowledgeable in jQuery.

Say I have 3 texts:

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

I have only this:

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

• javascript
• jquery

• you can use $.each for iterate your element and wrap it into setTimeout, you will get fadeOut animate from text1 then text2 and so on with delay 5second... – Joko Wandiro Commented Mar 28, 2012 at 14:02

3 Answers 3

First of all, fix your invalid HTML and use different classes (ids would work, too, btw):

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

Then use this JavaScript code:

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/ThiefMaster/hmRFB/1/

You can simply nest the callbacks. The function fadeOut takes 2 parameters, nr1 is how long time the animation should be, parameter nr2 is the callback that execute when the animation has pleted.

http://jsfiddle/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>​

Maybe this Animate Banner Text fit for your questions. DEMO

HTML Code ( your HTML code is correct, You create effective selector ) :

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