-1

- - 更新 - -

这是另一种尝试...问题似乎是由于 setTimeout 延迟，动画仅发生在我假设的 for 循环数组中的第三项上。如何延迟每个项目 (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();
    }

})();

--- 结束更新 ---

下面的代码有效，但我试图通过创建一个循环遍历每个项目的 foo 循环来优化我的代码（我的尝试已被注释掉）。我目前在我的页面上使用 3 个项目（标题、标题 2、横幅），它们将一个接一个地加载，但第二个项目不应该在第一个加载之前开始，第三个不应该在第二个项目加载之前开始，依此类推. 此代码最终将用于项目数量不确定但仍会一个接一个加载的面包屑。任何帮助是极大的赞赏。

    (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);
//      }
    })();
4

2 回答 2

0

use jQuery animation queue, not timeout.

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

于 2013-01-18T14:25:33.657 回答
0

尝试改变：

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

至：

setTimeout(function(){fadeIn(bcLink[i], 100)}, i * 1000);
于 2013-01-21T16:03:41.023 回答