不透明度效果從1.0到0，但不是0到1.0

-1

我想通過單擊按鈕將div的不透明度從0增加到1.0。我可以將不透明度從1.0降低到0.0，但從0.0到1.0不起作用。我也嘗試使用parseInt(element.style.opacity)和parseFloat(element.style.opacity)，但是這些工作都沒有。下面是錯誤的JavaScript：不透明度效果從1.0到0，但不是0到1.0

function myF(){ 
var x = document.getElementById("test").style; 
x.opacity = parseFloat(x.opacity) + 0.1; 
setTimeout(myF(),10); 
}

而這裏的錯誤HTML：

<button onclick="myF()">Click to change opacity</button> 
<div style="height:200px; width:200px; background-color:#656b67; opacity:0;" id="test">  </div>

（以下是JavaScript和HTML，對於降低不透明度作品）

<body> 
<script> 
function myF(){ 
    var x = document.getElementById("test").style; 
    x.opacity = x.opacity - 0.1; 
    setTimeout(function(){myF();},10); 
} 
</script> 
<button onclick="myF()">Click to resize</button> 
<div style="height:200px; width:200px; background-color:#656b67; opacity:1.0;"  id="test"></div> 
</body>

來源

2012-10-02 Shrey Gupta

你使用jQuery嗎？你有沒有檢查'能見度'和'顯示'CSS屬性？ – billy

不，我正在使用JavaScript。我將編輯我的代碼到帖子中。 –

向我們展示減少不透明度併成功運行的代碼 – Bergi

變化

setTimeout(myF(),10);

到

setTimeout(myF, 10);

你不想立即調用的函數，你想將它傳遞給setTimeout。

此外，你有一個永無止境的循環。該函數被遞歸地調用，並且沒有結束條件。當它立即調用時，這會導致您的瀏覽器凍結。

來源

2012-10-02 22:55:18 Bergi

這也行不通...雖然感謝提醒我缺乏上限。它仍然沒有與它一起工作，雖然... –

[Worksforme]（http://jsfiddle.net/7WaJb/1/）相當好。您只想讓超時時間更長，以便您可以注意到動畫 – Bergi

謝謝！它現在也適用於我！它一定是一些語法錯誤。 –

function myF(){ 
    var transparent_div = document.getElementById("test"); 

    var opacity = parseFloat(transparent_div.style.opacity); 

    if (isNaN(opacity)) opacity = 0.1; 
    else opacity += 0.1; 

    transparent_div.style.opacity = opacity; 

    if (opacity < 1.0) setTimeout(function(){myF();},100); 
}

如果不透明度設置爲「」空字符串，你將不會被解析了一些，這樣的JavaScript將返回一個NaN的對象，你可以測試使用isNaN（）。我認爲這是你的主要問題之一; parseFloat（）是正確的使用，你只需要檢查你的返回值。

來源

2012-10-02 23:36:39 MKUltra

好點，雖然'var o = parseFloat（style.opacity）|| 0;' – Bergi

不透明度效果從1.0到0，但不是0到1.0

回答

相關問題