雖然循環不起作用（在其他類似問題中沒有找到答案）

到目前爲止，這是我的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(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

來源

2016-03-08 OrangeCode

沒有登錄控制檯或'TweenLite'方沒有反應？ – stanleyxu2005

如果我做console.log它獲得整個數組。但在某個地方它找不到「我」。 – OrangeCode

嘗試改變'for（i = 0'爲'for（var i = 0'），如果你可以在SO或者jsbin上創建一個可運行的環境， – stanleyxu2005

我很難跟蹤到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}); 
    }); 
}

所以對於每個titleArray你的標題，匿名函數調用TweenLite.to（），並增加了0.1〜你的延遲。

來源

2016-03-08 14:21:27

雖然循環不起作用（在其他類似問題中沒有找到答案）

回答

相關問題