Javascript淡出產生意想不到的結果

我有一個HTML頁面上有三組圖像。我希望每個圖像的每個圖像保持可見狀態5秒鐘，然後一起淡出，當所有三個圖像都不可見時，再一起淡入。然後該過程再次開始。我正在嘗試在不使用JQuery的情況下執行此操作。我寫了一個JavaScript來做到這一點，它的工作原理，但過了一段時間奇怪的事情發生。圖像停止消失，或者過早地這樣做。下面是相關HTML：Javascript淡出產生意想不到的結果

<body onload="HideAll(fade1Image2, fade1Image3, fade1Image4, fade2Image2, 
fade2Image3, fade2Image4, fade3Image2, fade3Image3, fade3Image4); 
SetVariables(4,4,4);"> 

<div id="fade1Image1" style="position:absolute;top:0px;left:312px;"> 
    <img src="Images/Home/Power_Station/PowerStation1.jpg" alt="Power Station 1" /> 
</div> 
<div id="fade1Image2" style="position:absolute;top:0px;left:312px;"> 
    <img src="Images/Home/Power_Station/PowerStation2.jpg" alt="Power Station 2" /> 
</div> 
<div id="fade1Image3" style="position:absolute;top:0px;left:312px;"> 
    <img src="Images/Home/Power_Station/FenceLine1.jpg" alt="Fence Line 1" /> 
</div> 
<div id="fade1Image4" style="position:absolute;top:0px;left:312px;"> 
    <img src="Images/Home/Power_Station/FenceLine2.jpg" alt="Fence Line 2" /> 
</div> 

<div id="fade2Image1" style="position:absolute;top:208px;left:0px;"> 
    <img src="Images/Home/LNG_Terminal_Set/LNGTerminal1.jpg" alt="LNG Terminal 1" /> 
</div> 
<div id="fade2Image2" style="position:absolute;top:208px;left:0px;"> 
    <img src="Images/Home/LNG_Terminal_Set/LNGTerminal2.jpg" alt="LNG Terminal 2" /> 
</div> 
<div id="fade2Image3" style="position:absolute;top:208px;left:0px;"> 
    <img src="Images/Home/LNG_Terminal_Set/LNGTerminal3.jpg" alt="LNG Terminal 3" /> 
</div> 
<div id="fade2Image4" style="position:absolute;top:208px;left:0px;"> 
    <img src="Images/Home/LNG_Terminal_Set/LNGTerminal4.jpg" alt="LNG Terminal 4" /> 
</div> 
<div id="fade3Image1" style="position:absolute;top:416px;left:312px;"> 
    <img src="Images/Home/Airports/AirPort1.jpg" alt="Air Port 1" /> 
</div> 
<div id="fade3Image2" style="position:absolute;top:416px;left:312px;"> 
    <img src="Images/Home/Airports/AirPort2.jpg" alt="Air Port 2" /> 
</div> 
<div id="fade3Image3" style="position:absolute;top:416px;left:312px;"> 
    <img src="Images/Home/Airports/T1_Tracker.jpg" alt="TI Tracker 1" /> 
</div> 
<div id="fade3Image4" style="position:absolute;top:416px;left:312px;"> 
    <img src="Images/Home/Airports/Targets_Tracked_no_alarm.jpg" alt="TI Tracker 2" /> 
</div>

這裏是JavaScript：

var TimeToFade = 1000.0; 
var maxCount; 
var count; 

function SetVariables() 
{ 
    maxCount = new Array(arguments.length); 
    count = arguments.length + 1; 

for (var x = 0; x < arguments.length; x++) 
{ 
    maxCount[x] = arguments[x]; 
} 
} 

function fade(counter) 
{ 
var eid, countx; 

for (var x = 1; x < count; x++) 
{ 
    countx = counter % maxCount[x-1]; 
    if (countx == 0) 
     countx = maxCount[x-1]; 
    eid = "fade" + x + "Image" + countx; 

    var element = document.getElementById(eid); 
    if(element == null) 
      return; 

    if(element.FadeState == null) 
    { 
      if(element.style.opacity == null 
       || element.style.opacity == '' 
       || element.style.opacity == '1') 
     { 
      element.FadeState = 2; 
     } 
     else 
     { 
      element.FadeState = -2; 
     } 
    } 

    if(element.FadeState == 1 || element.FadeState == -1) 
    { 
      element.FadeState = element.FadeState == 1 ? -1 : 1; 
      element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft; 
    } 
    else 
    { 
      element.FadeState = element.FadeState == 2 ? -1 : 1; 
      element.FadeTimeLeft = TimeToFade; 
      if (x == 3) 
       setTimeout("animateFade(" + new Date().getTime() + ",'" + counter + "')", 33); 
    } 
} 
} 

function animateFade(lastTick, counter) 
{ 
var eid, countx; 

for (var x = 1; x < count; x++) 
{ 
    countx = counter % maxCount[x-1]; 
    if (countx == 0) 
     countx = maxCount[x-1]; 
    eid = "fade" + x + "Image" + countx; 

    var curTick = new Date().getTime(); 
    var elapsedTicks = curTick - lastTick; 

    var element = document.getElementById(eid); 

    if(element.FadeTimeLeft <= elapsedTicks) 
    { 
     element.style.opacity = element.FadeState == 1 ? '1' : '0'; 
     element.style.filter = 'alpha(opacity = ' 
      + (element.FadeState == 1 ? '100' : '0') + ')'; 
     element.FadeState = element.FadeState == 1 ? 2 : -2; 

     if (element.FadeState == 2 && x == count-1) 
     { 
      setTimeout(function(){fade(counter)}, 5000); 
      hidetext(TextBlock1, TextBlock2, Text2Block1, Text2Block2, Text3Block1, Text3Block2); 
     } 
     else if (x == count-1) 
     { 
      counter++; 
      fade(counter); 
     } 

     if (x == count-1) 
      return; 
    } 
    else if (element.FadeTimeLeft > elapsedTicks) 
    { 
     element.FadeTimeLeft -= elapsedTicks; 
     var newOpVal = element.FadeTimeLeft/TimeToFade; 
     if(element.FadeState == 1) 
      newOpVal = 1 - newOpVal; 

     element.style.opacity = newOpVal; 
     element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')'; 
    } 
} 

setTimeout("animateFade(" + curTick + ",'" + counter + "')", 33); 
} 

function HideAll() 
{ 
for (var i = 0; i < arguments.length; i++) 
{ 
    arguments[i].style.opacity = 0; 
    arguments[i].style.filter = 'alpha(opacity = 0)'; 
    arguments[i].FadeState = -2; 
} 
setTimeout(function(){fade(1)}, 5000); 
}

我看不到我所做的一切產生這種錯誤;任何幫助將不勝感激。

要查看實際的代碼，請單擊here。

來源

2012-09-18 Nick

你能提供一個JSFiddle來演示發生了什麼嗎？這是你傾倒在那裏的很多代碼。 – Pete

@Pete你可以在[這裏]（http://www.ar-t.co.uk/New_Site/）看到代碼，而Javascript是在'JavaScript/Fade.js' – Nick

這沒有按」我真的回答了這個問題，但是我重寫了JavaScript，看起來很有效。所以，爲了完整性，這裏是：

var Count = new Array(1, 1, 1); 
var MaxCount = new Array(8, 6, 5); 
var FadeState = "out"; 
var FadeTime = new Array(100, 100, 100); 

function Fade() 
{ 
for (var x = 0; x < 3; x++) 
{ 
    var id = "fade" + (x+1) + "Image" + Count[x]; 
    var element = document.getElementById(id) 

    if (FadeState == "out") 
    { 
     if (FadeTime[x] > 0) 
     { 
      FadeTime[x]-= 5; 

      element.style.filter = 'alpha(opacity = ' + FadeTime[x] + ')'; 
      element.style.opacity = FadeTime[x]/100; 
     } 
     else 
     { 
      Count[x]++; 
      if (Count[x] > MaxCount[x]) 
       Count[x] = 1; 

      if (x == 2) 
       FadeState = "back"; 
     } 
    } 
    else 
    {   
     if (FadeTime[x] < 100) 
     { 
      FadeTime[x]+= 5; 

      element.style.filter = 'alpha(opacity = ' + FadeTime[x] + ')'; 
      element.style.opacity = FadeTime[x]/100; 
     } 
     else 
     { 
      if (x == 2) 
       FadeState = "pause"; 
     } 
    } 
} 

switch (FadeState) 
{ 
    case "back": 
     FadeState = "in"; 
     Fade(); 
     break; 
    case "pause": 
     FadeState = "out"; 
     setTimeout(function(){Fade()}, 5000);   
     break; 
    default: 
     setTimeout(function(){Fade()}, 20); 
} 
} 

function HideAll() 
{ 
for (var i = 0; i < arguments.length; i++) 
{ 
    var element = document.getElementById(arguments[i]); 
    element.style.opacity = 0; 
    element.style.filter = 'alpha(opacity = 0)'; 
} 
setTimeout(function(){Fade()}, 5000); 
}

來源

2012-09-23 11:51:43 Nick

你需要把引號的ID，當你調用HideAll方法

HideAll('fade1Image2', 'fade1Image3', 'fade1Image4', 'fade2Image2', 
'fade2Image3', 'fade2Image4', 'fade3Image2', 'fade3Image3', 'fade3Image4')

而你需要設置自己的風格才真正找到的元素..

function HideAll() 
{ 
for (var i = 0; i < arguments.length; i++) 
{ 
    var element = document.getElementById(arguments[i]); 
    element.style.opacity = 0; 
    element.style.filter = 'alpha(opacity = 0)'; 
    element.FadeState = -2; 
} 
setTimeout(function(){fade(1)}, 5000); 
}

來源

2012-09-20 15:14:42

這不是錯誤的地方謊言;無論如何，我改變了它，但奇怪的事情仍然發生。 – Nick

Javascript淡出產生意想不到的結果

回答

相關問題