-1

- - アップデート - -

これが別の試みです...問題は、setTimeoutの遅延のために、アニメーションがforループ配列の3番目の項目にのみ発生することです。各アイテム (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();
    }

})();

--- 更新終了 ---

以下のコードは機能しますが、各項目をループする for ループを作成してコードを最適化しようとしていました (私の試みはコメントアウトされています)。現在、ページで 3 つのアイテム (header、header2、banner) を使用していますが、これらは次々にロードされますが、2 番目は最初のロードまで開始されず、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

タイムアウトではなく、jQueryアニメーションキューを使用します。

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 に答える