一個JS淡入淡出效果不起作用（for循環）

我試着用setTimeout（）函數做一個JS淡入淡出效果，它似乎在某種程度上工作，但我似乎無法弄清楚什麼是錯的代碼如下：一個JS淡入淡出效果不起作用（for循環）

<html> 
<head> 
<title></title> 
<script type="text/javascript"> 
function FadeEffect(n) 
{ 
    var i=1; 
    fade = document.getElementById("box"); 
    if (n===1) 
    { 
     fade.style.opacity=i/10; 
     i++; 
     setTimeout("FadeEffect(1)",50); 
     if (fade.style.opacity=1) 
     { 
     var i=1; 
     } 
    } 
    else if (n===0) 
    { 
     fade.style.opacity=1-i/10; 
     i++; 
     setTimeout("FadeEffect(0)",50); 
     if (fade.style.opacity=0) 
     { 
     var i=1; 
     } 
    } 
} 


</script> 
<style type="text/css"> 
#box{ 
width: 200px; 
height: 50px; 
border: 1px solid black; 
background-color: #ccc; 
opacity: 0; 
} 
</style> 
</head> 
<body> 
<div onMouseOver="FadeEffect(1)" onMouseOut="FadeEffect(0)" id="box">Menu</div> 
</body> 
</html>

編輯：用setTimeout（）函數更新代碼。

來源

2011-12-28 Onion

你可以試試jQuery。這是非常好的，你可以很容易地添加淡入淡出效果元素。 – omnidan 2011-12-28 14:53:47

感謝您的建議，但問題仍未解答。看，我是一個初學者，我真的想全力以赴。 – Onion 2011-12-28 14:55:56

你在你的問題中說你使用「setTimeout（）」，但在你發佈的代碼中沒有對「setTimeout（）」的調用。 – Pointy 2011-12-28 15:13:04

我可以看到這個函數有兩個問題。

首先，您的if報表既做分配，也做比較。當你應該說if (n===0)（三個===，比較，或者你可以使用兩個==來進行類型轉換比較）時，你說的是if (n=0)（one =，作業）。

其次，使用for循環反覆更改樣式不會因爲瀏覽器不會在您的代碼執行的同時更新顯示而褪色 - 實質上它使用相同的線程來顯示和JavaScript的。所以這個頁面在函數退出後會被更新。你需要給瀏覽器有機會通過使用setTimeout()每次迭代後更新 - 是這樣的：

function fadeEffect(element,startValue,target,delay){ 
    element.style.opacity = startValue; 
    if (startValue < target) 
     startValue = Math.min(startValue + 0.1, target); 
    else 
     startValue = Math.max(startValue - 0.1, target); 

    if (startValue != target) 
     setTimeout(function(){fadeEffect(element,startValue,target,delay);}, delay); 
} 

<div onMouseOver="fadeEffect(this, 1, 0, 100);" 
    onMouseOut="fadeEffect(this, 0, 1, 100);" id="box">Menu</div>

演示：http://jsfiddle.net/hLQ6y/2/

編輯：請注意，此代碼不應對所有出色，如果您移動鼠標進出太快，也就是說，如果在淡出完成之前觸發淡入。（你可以在我的jsfiddle中看到我的意思。）如果需要，您可以通過從.setTimeout()保存返回並調用.clearTimeout()來解決此問題。鑑於我已經介紹了這個問題的實質，我將作爲練習爲讀者留下微調...

更新：您的更新代碼引入了新的if語句，它具有相同的賦值 - 的比較問題。同時它永遠呼叫setTimeout() - 你應該有條件地做，就像在Pointy和我給出的答案中一樣。此外，您似乎依賴於變量i，它作爲局部變量不會在調用之間保留其值 - 您可以將其設置爲全局變量，但更好地將其作爲參數像我一樣管理或作爲局部變量外部功能像Pointy那樣。

來源

2011-12-28 15:03:52 nnnnnn

謝謝你的回答！ – Onion 2011-12-28 15:22:29

再次感謝您的詳細解答！我做了一些研究，並且學習了關於運算符和比較的新內容。我現在看到我的錯誤。 – Onion 2011-12-28 15:36:02

問題是，所有這些樣式的變化都會在瀏覽器更新顯示之前發生。你需要做的是使用「setTimeout（）」在更長的時間內將變化隔開。

function fadeIn() { 
    function increment() { 
    box.style.opacity = Math.min(1.0, (opacity += 0.1)); 
    if (opacity < 1.0) { 
     setTimeout(increment, 100); 
    } 
    } 
    var box = document.getElementById('box'), opacity = 0; 
    box.style.opacity = opacity; 
    setTimeout(increment, 100); 
}

編輯 — Here是演示的jsfiddle。

來源

2011-12-28 14:59:21 Pointy

我剛剛使用setTimeout（）函數編輯了代碼，該函數看起來不起作用。 – Onion 2011-12-28 15:02:21

我正在做一個jsfiddle，但是這個網站今天早上真的很慢...堅持一秒 – Pointy 2011-12-28 15:03:08

但是，我看到了，請你看看我更新過的代碼。由於某種原因，它不起作用。 – Onion 2011-12-28 15:07:08

如果您希望淡入淡出，您需要創建一個函數來設置不透明度-0.1或+0.1，然後在100ms（或更少）內使用setTimeout調用自身。如果你不讓腳本等待，它會太快，並立即將不透明度設置爲1.0。

不管怎麼說，使用jQuery你可以更容易地做到這一點。

來源

2011-12-28 15:00:41 omnidan

一個JS淡入淡出效果不起作用（for循環）

回答

相關問題