while循环不起作用（在其他类似的问题中找不到答案）

时间：2016-03-08 13:59:02

标签： javascript loops for-loop while-loop tweenlite

我正在尝试遍历一个数组。

到目前为止，这是我的HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>banner_sizmek_300x250</title>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://secure-ds.serving-sys.com/BurstingScript/EBLoader.js"></script>
    <script src="banneranimation.js" type="text/javascript"></script>
    <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: sans-serif;
            background: white;
            overflow: hidden;
            width: 300px;
        }

        #container {
            position: relative;
            overflow: hidden;
            width: 300px;
            height: 250px;
            top: 0px;
            left: 0px;
            margin: auto;
        }

        #content {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            background-color: #FFF;
        }

        #overlay {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            background-color: #ffffff;
        }

        #border {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            border: 1px solid #666666;
            box-sizing: border-box;
            -o-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -ms-box-sizing: border-box;
        }

        /* ************************* */
        /* ********** BAS ********** */
        /* ************************* */

            .block
            {
                /*positie*/
                position: absolute;
            }

        /* ************************* */
        /* ********** BAS ********** */
        /* ************************* */

    </style>
    <script type="text/javascript" charset="utf-8">
        function checkInit() {
            if (!EB.isInitialized()) {
                EB.addEventListener(EBG.EventName.EB_INITIALIZED, onInit); // This code checks whether the EB object is initialized, if the object is initialized, it launches the function "onInit", otherwise it registers to the "EB_INITIALIZED" event. 
            } else {
                onInit();
            }
        }

        function onInit() {
            setClickTag();
            initBanner();
        }

        function setClickTag() {
            document.getElementById("bg-exit").addEventListener("click", dynamicClick);
        }

        function dynamicClick() {
            EB.clickthrough();
        }

        window.onload = function (e) {
            checkInit();
        };
    </script>
</head>

<body>
    <div id="container">
        <div id="content">

            <!-- ***************************** -->
            <!-- *** put your content here *** -->
            <!-- ***************************** -->



                <!--visuals-->
                    <img src="visual01.jpg" id="visual01" class="block" alt="visual01" >
                    <img src="visual02.jpg" id="visual02" class="block" alt="visual02" >
                <!--visuals-->




                <!--copies-->
                    <!--animated txt-->
                        <img src="copy00.1.png" id="copy00_1" class="block" alt="copy00_1" >
                        <img src="copy00.2.png" id="copy00_2" class="block" alt="copy00_2" >
                        <img src="copy00.3.png" id="copy00_3" class="block" alt="copy00_3" >
                        <img src="copy00.4.png" id="copy00_4" class="block" alt="copy00_4" >
                        <img src="copy00.5.png" id="copy00_5" class="block" alt="copy00_5" >
                        <img src="copy00.6.png" id="copy00_6" class="block" alt="copy00_6" >
                        <img src="copy00.7.png" id="copy00_7" class="block" alt="copy00_7" >
                        <img src="copy00.8.png" id="copy00_8" class="block" alt="copy00_8" >
                    <!--animated txt-->

                    <img src="copy01.png" id="copy01" class="block" alt="copy01" >
                    <img src="copy02.png" id="copy02" class="block" alt="copy02" >
                <!--copies-->




                <!--cta-->
                    <div id="cta_wrapper">
                        <img src="cta.png" id="cta" class="block" alt="cta" >
                        <img src="cta_over.png" id="cta_over" class="block" alt="cta_over" >
                    </div>
                <!--cta-->

            <!-- ***************************** -->
            <!-- *** put your content here *** -->
            <!-- ***************************** -->

            <div id="overlay"></div>
            <div id="border"></div>
        </div>
        <div id="bg-exit" style="position:absolute; width: 100%; height: 100%; top:0px; left:0px; opacity:0; cursor:pointer"></div>
    </div>
</body>

</html>

这是我的JS（我也使用TweenLite）：

// This function is activated after the banner is loaded, and the clicktag is set
function initBanner() {  
    resetBanner();
    document.getElementById('bg-exit').addEventListener('mouseover' , on_mouse_over);
    document.getElementById('bg-exit').addEventListener('mouseout'  , on_mouse_out);
}

function on_mouse_over(){
    TweenLite.set("#cta_over", {autoAlpha: 1});
};

function on_mouse_out(){
    TweenLite.to("#cta_over", 0.3, {autoAlpha: 0});
};

// this resets the banner animation
function resetBanner() {

    // *********************
    // *** SET elementen ***
    // *********************

        // ****************
        // *** own code ***
        // ****************

            TweenLite.set("#copy00_1    ", {opacity: 0        });     // NOT VISABLE          IMG         titel animatie
            TweenLite.set("#copy00_2    ", {opacity: 0        });     // NOT VISABLE          IMG         titel animatie
            TweenLite.set("#copy00_3    ", {opacity: 0        });     // NOT VISABLE          IMG         titel animatie
            TweenLite.set("#copy00_4    ", {opacity: 0        });     // NOT VISABLE          IMG         titel animatie
            TweenLite.set("#copy00_5    ", {opacity: 0        });     // NOT VISABLE          IMG         titel animatie
            TweenLite.set("#copy00_6    ", {opacity: 0        });     // NOT VISABLE          IMG         titel animatie
            TweenLite.set("#copy00_7    ", {opacity: 0        });     // NOT VISABLE          IMG         titel animatie
            TweenLite.set("#copy00_8    ", {opacity: 0        });     // NOT VISABLE          IMG         titel animatie

            TweenLite.set("#visual02    ", {autoAlpha: 0        });     // NOT VISABLE          IMG         visual02
            TweenLite.set("#copy01      ", {autoAlpha: 0, x: -40});     // NOT VISABLE          TXT         "het kan met de leasecalculator"
            TweenLite.set("#copy02      ", {autoAlpha: 0, x: -40});     // NOT VISABLE          TXT         "direct inzicht in je maandlasten"
            TweenLite.set("#cta_wrapper ", {autoAlpha: 0, x: -40});     // NOT VISABLE          CTA         wrapper
            TweenLite.set("#cta_over    ", {autoAlpha: 0        });     // NOT VISABLE          CTA         over

        // ****************
        // *** own code ***
        // ****************

    // *********************
    // *** SET elementen ***
    // *********************

    TweenLite.set("#overlay", {autoAlpha: 1});
    animateBanner();
}

// starts the banner animation
function animateBanner() {
    var i = 0;
    var delay = 0;
    delay += 0.3;
    TweenLite.to("#overlay", 0.5, {delay: delay, autoAlpha: 0});

    // *************************
    // *** ANIMATE elementen ***
    // *************************

        // ****************************
        // put your animation code here
        // ****************************

            var titleArray = ["#copy00_1", "#copy00_2", "#copy00_3", "#copy00_4", "#copy00_5", "#copy00_6", "#copy00_7", "#copy00_8"];

            delay += 2;
            TweenLite.to("#visual01", 0.5, {delay: delay, autoAlpha: 0         });             // OUT          IMG         visual01

                while(i < titleArray.length){
                    console.log(i);
                    console.log(titleArray[i]);

                    delay = 0;
                    TweenLite.to(titleArray[0], {delay: delay, opacity: 1});
                    delay += 0.1;
                    TweenLite.to(titleArray[0], {delay: delay, opacity: 0});
                    i++;
                }

        // ****************************
        // put your animation code here
        // ****************************

    // *************************
    // *** ANIMATE elementen ***
    // *************************

}

function doSomethingFunction(){
    console.log("Doing something!");
}

我也试过像这样使用for循环..但是没有一个工作.. 

for(i=0; i < titleArray.length; i++){
delay = 0;
console.log("i is", i);
console.log("first children is", titleArray[i]);

TweenLite.to(titleArray[i], 0.2, {delay: delay, opacity: 1});
delay += 1;
TweenLite.to(titleArray[i], 0.2, {delay: delay, opacity: 0});
}

如果有人可以帮助我，我希望如此！我完全被困在这里：S

1 个答案:

答案 0 :(得分：0)

我很难跟踪实际调用animateBanner()函数的位置。我看到它在resetBanner()结束时被调用，所以我试着找到我们称之为该函数的位置。它位于initBanner()。这是在onInit()中调用的，checkInit()在resetBanner()中定义和调用...它是一条漫长的大风。您是否确认您的forEach()功能甚至被调用？

在这种情况下，我建议使用titleArray数组方法循环遍历function animateBanner() { var delay = 0; // tweenLite code var titleArray = ['Your', 'Titles']; titleArray.forEach(function(title) { TweenLite.to(title, {delay: delay, opacity: 1}); delay += 0.1; TweenLite.to(title, {delay: delay, opacity: 0}); }); } ：

{{1}}

因此，对于titleArray中的每个标题，匿名函数调用TweenLite.to（）并为延迟添加0.1。

相关问题
最新问题