Question

---更新---

这是另一次尝试......问题似乎是动画只发生在我假设的for循环数组中的第三项，因为setTimeout延迟。如何延迟每个项目（3）的动画点火？

// Breadcrumb Animation

(function(){
    var header = document.getElementById("header"),
        header2 = document.getElementById("header-secondary"),
        banner = document.getElementById("banner");
    var bcLink = [header, header2, banner];
    var myTime = '';
    var myItem = '';
    function delay() {
        setTimeout(fadeIn, myTime);
        function fadeIn() {
            if( myItem.style.opacity !== '1' ) {
                console.log(myItem);
                setInterval(function(){
                    myItem.style.opacity = parseFloat(myItem.style.opacity) + 0.1;
                }, 100);
            }
        }
    }
    var i, len=bcLink.length;
    for(var i = 0; i < len; i++) {
        bcLink[i].style.opacity = 0;
        myItem = bcLink[i];
        myTime = myTime = parseInt(myTime + 2000)
        delay();
    }

})();

--- END UPDATE ---

下面的代码有效但我试图通过创建一个循环遍历每个项目的foor循环来优化我的代码（我的尝试被注释掉了）。我目前正在我的页面上使用3个项目（header，header2，banner），它们将一个接一个地加载，但是第二个不应该在第一个加载之前启动，第三个不应该在第二个项目加载之前启动，依此类推。此代码最终将用于面包屑，其中项目的数量将是不确定的，但它们仍将一个接一个地加载。非常感谢任何帮助。

    (function(){
        var header = document.getElementById("header"),
            header2 = document.getElementById("header-secondary"),
            banner = document.getElementById("banner");
        var bcLink = [header, header2, banner];
        var myTime = '';
        function fadeIn(name, speed) {
            if( name.style.opacity !== '1' ) {
                setInterval(function(){

                    name.style.opacity = parseFloat(name.style.opacity) + 0.1;
                }, speed);
            }
        }
        function delay(funct, time) {
            setTimeout(function() {funct}, time);
        }
            bcLink[0].style.opacity = 0;
            bcLink[1].style.opacity = 0;
            bcLink[2].style.opacity = 0;
            setTimeout(function(){fadeIn(bcLink[0], 100)}, 0);
            setTimeout(function(){fadeIn(bcLink[1], 100)}, 1000);
            setTimeout(function(){fadeIn(bcLink[2], 100)}, 2000);
//      for(var i = 0; i < bcLink.length; i++) {
//          bcLink[i].style.opacity = 0;
//          delay(fadeIn(bcLink[i],100), i + 000);
//      }
    })();

Answer 1

使用jQuery动画队列，而不是超时。

http://blog.bigbinary.com/2010/02/02/understanding-jquery-effects-queue.html

Answer 2

尝试更改：

delay(fadeIn(bcLink[i],100), i + 000);

为：

setTimeout(function(){fadeIn(bcLink[i], 100)}, i * 1000);

在带有数组的for循环中使用setTimeout的问题

2 个答案: