Question

下面的代码（div在我的实例中有阴影，我想按顺序将它们的不透明度减少到0，所以每个都按顺序消失。

我尝试在不使用setTimeout的情况下执行此操作，但所有div都同时消失了 - 很高兴知道改变不透明度的代码部分有效，但我似乎无法让它们按顺序工作。

当我尝试使用setTimeout（我认为我实现不正确）时，没有任何反应！

任何帮助都会非常感激，我是一个相当陌生的JavaScript，并且有一段时间没有触及它，教程还没有能够帮助我。

<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>

        <script type="text/javascript">
    // the divs that we want to cycle through are named here.
    var divs = ["#div1", "#div2", "#div3", "#div4"];
    var divsLength = divs.length;   

        for (var i = 0; i < divsLength; i++) {
            setTimeout(function(){ 
              $(divs[i]).fadeTo(1000, 0, function() {   
              });
            },1500);
        };  

    </script>
</body>

Answer 1

您可以使用递归函数来执行此类操作：

function seqFade($el){
    $el.first().fadeOut(500, function(){ //Take the first element and fade it out
        seqFade($el.slice(1)); //Recall the function when complete with the same set of element minus the first one.
    })
}

seqFade($('div')); //Call the function

http://jsfiddle.net/L2fvdfy2/

在您的代码中，它可能看起来像这样：

function seqFade($el){
    $el.first().fadeOut(500, function(){
        seqFade($el.slice(1));
    })
}

seqFade($('#div1, #div2, #div3, #div4'));

Answer 2

这是因为当超时最终触发变量“i”时，只有最后一个索引值。此外，循环将几乎同时启动所有超时。

还有其他方法可以实现它，但这可能只需对代码进行最少的更改。

试试这个：

<script type="text/javascript">

    var divs = ["#div1", "#div2", "#div3", "#div4"];
    var divsLength = divs.length;   

        for (var i = 0; i < divsLength; i++) {
            setTimeout((function(index) { 
              return function(){ 
                $(divs[index]).fadeTo(1000, 0, function() { });
              }
            )(i)),1500 + (i * 1500));
        };  

    </script>
</body>

这将在调用时使用它自己的索引副本创建函数的实例。同时增加每个超时的超时将使它们按顺序执行。

Answer 3

如果没有setTimeout：

，您应该可以这样做

function doFade(items, index) {
    $(items[index]).fadeTo(1000, 0, function() {
        doFade(items, index + 1);
    });
}

doFade(divs, 0);

如果你的目标是支持ES5的浏览器（大多数现代版本都有），那么你可以进一步简化doFade：

function doFade(items, index) {
    $(items[index]).fadeTo(1000, 0, doFade.bind(this, items, index + 1));
}

working jsfiddle

Answer 4

试试这个：

// the divs that we want to cycle through are named here.
var divs = ["#div1", "#div2", "#div3", "#div4"];

(function fade(i) {
    $(divs[i]).fadeTo(1000, 0, function() {
        setTimeout(function() {fade(++i);}, 500);
    });
})(0);

Answer 5

    for (var i = 1; i <= divsLength; i++) {
        setTimeout(function(){ 
          $(divs[i]).fadeTo(1000, 0, function() {   
          });
        },1000*i);

试试这个

setTimeout不工作，在for循环中排队的其他方法？

5 个答案: