Question

我在页面上有三个图像滑块实例，它们应该一个接一个地淡入淡出。我正在使用innerfade.js

我想让他们在不同的时间开始，例如第一个在2秒后开始，第二个在4秒后开始，第三个在6秒后开始。因此，fisrt过渡需要在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和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 2

$(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

Answer 3

尝试以下方法，我基于一些假设对其进行了一些优化..但这会给你一个想法。如果不同，请告诉我。

$(document).ready(function() {

        var innerFadeOpt = {
            animationtype: 'fade',
            speed: 750,
            timeout: 6000,
            type: 'random_start',
            containerheight: '1em'
        };

        var ptr = 0, headerImgs = ['#header-img-1', '#header-img-2', '#header-img-3'];

        var timer = setInterval (function () {
           if (ptr == headerImgs.length - 1) {
              clearInterval(timer);
              return;
           }

           $(headerImgs[ptr++]).innerfade2(innerFadeOpt);
        }, 2000);
    }
);

Answer 4

这是一个如何使用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);

延迟jQuery函数

4 个答案: