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

要设置电影var，您需要致电：

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

#movies {
  opacity: 0.0;
}

然后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。这个我试过并按你的意愿工作

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淡入淡出

2 个答案: