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 Fiddle:

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

Answer 2

这是你的问题

问题1：如果您使用

定义了 css

#movies {
  opacity: 0.0;
}

然后 document.getElementById().style.opacity 是空的，因为它采用内联样式，即 <div id="movies" style="opacity: 0.0">

问题二： movies.style.opacity = movies.style.opacity + 0.1; movies.style.opacity returns 一个字符串，所以您基本上是在附加字符串，结果为 0.10.1 等等。你需要做 parseFloat！附件fiddle将解决您的问题

代码：

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。这是我试过并按你想要的方式工作

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

Javascript div 使用 setInterval 淡入不工作

Javascript div fade in not working using setInterval

javascript

html

css

setinterval

fadein