javascript - Fade effect with timer? - Stack Overflow

admin管理员组

文章数量:1357276

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

Share Improve this question Follow edited Mar 28, 2012 at 13:59 JJJ 33.2k2020 gold badges9494 silver badges103103 bronze badges asked Mar 28, 2012 at 13:48 Wondering CoderWondering Coder 1,7021111 gold badges3131 silver badges5151 bronze badges 1

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

本文标签： javascriptFade effect with timerStack Overflow