1

我在一个页面上有三个图像滑块实例，它们应该连续淡出，一个接一个。我正在使用 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'
        });
    }
);

非常感谢。

4

4 回答 4

0

Here is a simple example of how to use setTimeout to achieve the kind of interaction you are looking for:

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);​
于 2012-11-06T17:56:28.857 回答
0 
$(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);
    });
});

小提琴

于 2012-11-06T17:54:44.617 回答
0

试试下面的方法，我根据一些假设对它进行了一些优化。但这会给你一个想法。让我知道它是否不同。

$(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);
    }
);
于 2012-11-06T17:55:06.723 回答
0

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'
});
于 2012-11-06T17:51:18.173 回答