Javascript div褪色不工作使用setInterval

Question

我試圖做一個div包含一些圖片淡入，但它不工作，我不知道爲什麼。我相信inverval甚至沒有被調用。 div的不透明度設置爲0.0這是代碼：

var movies = getElementById("movies"); 

    var apparence = function(){ 
     if(movies.style.opacity < 1.0){ 
      movies.style.opacity = movies.style.opacity + 0.1; 
     } else { clearInterval(timer); 
     } 

    } 

    var timer = window.setInterval(apparence, 1000); 

非常感謝。

Answer 1

要設置你的電影變種，你需要調用：

document.getElementById('movies'); 

你正試圖增加透明度沒有工作的方式，所以我已經更新了你的榜樣。

新代碼：

var movies = document.getElementById("movies"); 
var opacity = 0.1; 
var apparence = function(){ 
    if(opacity <= 1.0) { 
     movies.style.opacity = opacity; 
    } else { 
     clearInterval(timer); 
    } 
    opacity += 0.1; 
} 

var timer = window.setInterval(apparence, 1000); 

JS小提琴：

http://jsfiddle.net/onov6cq4/1/

Answer 2

這是你的問題

問題1：如果定義使用

你的CSS

然後document.getElementById().style.opacity是空的，因爲它從內樣式需要即<div id="movies" style="opacity: 0.0">

問題2： movies.style.opacity = movies.style.opacity + 0.1; movies.style.opacity返回一個字符串，所以你基本上是附加字符串結果0.10.1等等。你需要做parseFloat！所附的小提琴將解決您的問題

代碼：

var moviesOp = document.getElementById('movies').style.opacity; 

    function apparence(){ 
     console.log('interval called with op = ' + moviesOp); 
     if(moviesOp < 1.0){ 
      moviesOp = parseFloat(moviesOp, 10) + 0.1; 
     } else { 
      clearInterval(timer); 
     } 
    } 

    var timer = setInterval(apparence, 1000); 

<div id="movies" style="opacity: 0.0"> 

JSBin With Inline Style

如果你想在CSS中使用，而不是內聯再使用的getComputedStyle。這個我試過，並可作爲u想

var movies = document.getElementById('movies'); 

    function apparence(){ 
     var moviesOp = getComputedStyle(movies).getPropertyValue('opacity'); 
     console.log('interval called with op = ' + moviesOp); 
     if(moviesOp < 1.0){ 
      movies.style.opacity = parseFloat(moviesOp, 10) + 0.1; 
     } else { 
      clearInterval(timer); 
     } 
    } 

    var timer = setInterval(apparence, 1000); 

Non Inline jsBin