在超過500毫秒的原始javascript中淡入HTML元素

再一次，我發現自己被某些我不明白的東西卡住了。任何幫助，將不勝感激。我正在模態窗口上工作，你點擊了一些東西，背景被蒙上了陰影，模態窗口顯示了一些內容。我有一個「display：none」和「opacity：0」的div，當用戶觸發模式時，這個div將覆蓋所有內容並對它有一定的透明度。在我看來，我需要做的是：設置不透明度執行一個「for」循環來檢查不透明度是否小於所需值。在這個循環中，執行一個「setInterval」逐漸增加不透明度的值，直到達到所需的值。達到所需值後，執行「if」語句以「clearInterval」。到目前爲止我的代碼如下：。在超過500毫秒的原始javascript中淡入HTML元素

var showMask = document.getElementById('mask'); 
function fireModal(){ 
showMask.style.opacity = 0; 
showMask.style.display = 'block'; 
var getCurrentOpacity = showMask.style.opacity; 
var increaseOpacity = 0.02; 
var finalOpacity = 0.7; 
var intervalIncrement = 20; 
var timeLapse = 500; 
function fadeIn(){ 
    for(var i = getCurrentOpacity; i < finalOpacity; i++){ 
     setInterval(function(){ 
      showMask.style.opacity = i; 
     }, intervalIncrement)  
    } 
    if(getCurrentOpacity == finalOpacity){ 
     clearInterval(); 
    } 
} 
fadeIn(); 
}

大家都可以猜到，這是行不通的，它是所有沒有在逐漸淡化它提前設置不透明度爲「1」謝謝您幫幫我。

來源

2010-04-22 jnkrois

爲什麼jQuery不是一個選項？ – 2010-04-22 18:30:32

jQuery是你的朋友。把它拿出來喝，看看你是否繼續。 – 2010-04-22 18:36:24

我知道，我真的使用它很多，不幸的是不能用它來實現這個功能，我很慚愧地承認我對原始javascript不太熟悉。 – jnkrois 2010-04-22 18:44:31

你應該使用jquery，mootools或extjs這樣的東西。

但基本上你需要做的是：

var id = setInterval(function() { 
    showMask.style.opacity += .05; 
    if (showMask.style.opacity >= 1) 
    { 
     clearInterval(id); 
    } 
},200)

這將淡入超過2秒。

來源

2010-04-22 18:34:38

謝謝，我會試試這個。不幸的是我不能使用jQuery（長篇故事），除此之外，它讓我有機會學習更多的原始JavaScript。 – jnkrois 2010-04-22 18:37:27

請注意，id將需要全局或間隔回調不會找到它。 – 2010-04-22 18:39:31

我沒有得到任何錯誤，但行爲是相同的，不是它立即將不透明度改變爲「0.05」，而是在時間流逝中改變。我會試試這些更多的東西，這樣我就可以做對了，我只是想確保我的思維過程是正確的。 – jnkrois 2010-04-22 19:01:54

把我當作另一個強烈建議使用jQuery的人。在我的工作環境中，我經常面臨類似的挑戰，因爲企業老闆基本上都害怕任何進步，所以我理解你的困境。但是，這是說，我的建議是花時間重寫輪子，花時間弄清楚如何使用適當的解決方案，在這種情況下，這是jQuery或其他JavaScript框架。如果你可以編寫你自己的函數，你可以使用jQuery。

<script> 
    document.write("<scr" + "ipt src='http://givemejquery'></scr" + "ipt>"); 
</script>

來源

2010-04-22 19:08:16

我聽到你在說什麼，並相信我，我同意你的意見。我實際上已經使用jQuery編寫函數，只是意識到我們正在開發的應用程序使用jQuery 1.1.1，並且我們無法升級。我寧願編寫普通的JavaScript，而不願使用舊的（非常舊的）jQuery版本。 – jnkrois 2010-04-22 19:20:49

請升級你的jQuery。如果你有版本1.1.1，你肯定可以升級它。作爲U.I.E.我強烈建議你推動你的公司/公司/客戶/獨裁者進行升級並使用有用的，用戶友好的，維護良好的工具，以幫助推廣標準化良好的網站。開發者保護網絡和鼓勵良好實踐是我們的工作。做什麼是正確的！ – Calvin 2010-04-22 19:54:21

我同意你的說法，我已經告訴他們爲了效率和發展的速度，我們應該升級。我們將在大約三個月內完成其餘應用程序準備遷移到新平臺。猜猜這將是一個漫長的等待。 – jnkrois 2010-04-22 20:07:29

在超過500毫秒的原始javascript中淡入HTML元素

回答

相關問題