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并使用不同的类（ID也可以使用，顺便说一下）：

<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

也许这个Animate Banner Text适合您的问题。 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);
});

用计时器淡化效果？

3 个答案: