延迟jQuery函数

Question

我在一页上有三层图像滑块，它们应该一排一排地淡出，一个接一个。我用的是innerfade.js

我想让他们在不同的时间开始，例如，第一个在2秒后开始，第二个在4秒之后，第三个在6秒之后。因此，裂变转换需要在2秒后发生，但在下一个淡出之前需要6秒。

编辑:它们应该在页面加载的同时出现，然后逐个淡出。

我不知道我怎么能做到这一点。我尝试过使用setTimeout和.delay，但是我无法让它开始工作。原因可能是我对Javascript不在行。但我希望能在这里得到一些帮助。

我就是从这里来的：

$(document).ready(
    function(){
        $('#header-img-1').innerfade2({
            animationtype: 'fade',
            speed: 750,
            timeout: 6000,
            type: 'random_start',
            containerheight: '1em'
        });

        $('#header-img-2').innerfade2({
            animationtype: 'fade',
            speed: 750,
            timeout: 6000,
            type: 'random_start',
            containerheight: '1em'
        });

        $('#header-img-3').innerfade2({
            animationtype: 'fade',
            speed: 750,
            timeout: 6000,
            type: 'random_start',
            containerheight: '1em'
        });
    }
);

非常感谢。

Answer 1

下面是一个简单的示例，说明如何使用setTimeout来实现您正在寻找的那种交互：

http://jsfiddle.net/zFMjf/

HTML

<div id="example1" class="con orange" style="display:none;">Example 1</div>
<div id="example2" class="con lime" style="display:none;">Example 2</div>
<div id="example3" class="con yellow" style="display:none;">Example 3</div>​

CSS

.con { width:200px; line-height:60px; margin:0 0 20px 0; }
.orange { background:orange; }
.lime { background:lime ; }
.yellow { background:yellow ; }

jQUERY

setTimeout(function(){
   $('#example1').slideToggle();
},2000);

setTimeout(function(){  
    $('#example2').slideToggle();
},4000);

setTimeout(function(){  
    $('#example3').slideToggle();
},6000);​

Answer 2

您是对的，可以使用setTimeout和delay函数延迟脚本的执行。

下面是setTimeout使用的示例：

setTimeout(function(){
        $('#header-img-2').innerfade2({
            animationtype: 'fade',
            speed: 750,
            timeout: 6000,
            type: 'random_start',
            containerheight: '1em'
        });
    },2000 /*2seconds*/);

关于.delay()，您应该这样编码：

$('#header-img-2').delay(2000).innerfade2({
    animationtype: 'fade',
    speed: 750,
    timeout: 6000,
    type: 'random_start',
    containerheight: '1em'
});

Answer 3

$(document).ready(function() {
    var numb = [1,2,3];

    $.each(numb, function(i,elm) {
        setTimeout(function() {
            $('#header-img-'+numb[i]).innerfade2({
                animationtype: 'fade',
                speed: 750,
                timeout: 6000,
                type: 'random_start',
                containerheight: '1em'
            });
        },numb[i]*2000);
    });
});

FIDDLE