使用setInterval时Javascript div淡入不起作用

我正在尝试制作一个包含大量淡入画面的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);

var movies=getElementById（“movies”）；
变量外观=函数（）{
如果（movies.style.opacity<1.0）{
movies.style.opacity=movies.style.opacity+0.1；
}else{clearInterval（计时器）；
}
}
var定时器=窗口设置间隔（明显，1000）；

---

非常感谢。

要设置您的电影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);

var movies=document.getElementById（“movies”）；
var不透明度=0.1；
变量外观=函数（）{
如果（不透明度这就是你的问题

问题1：
如果您已经使用

#movies {
  opacity: 0.0;
}

然后
document.getElementById（）.style.opacity
为空，因为它采用内联样式，即

问题2：
movies.style.opacity=movies.style.opacity+0.1；
movies.style.opacity返回一个字符串，因此您基本上是在附加字符串，结果是0.10.1等等。您需要执行parseFloat！附加的fiddle将解决您的问题

代码：

var moviesOp=document.getElementById（'movies'）.style.opacity；
函数外观（）{
log（'op='+moviesOp调用的间隔）；
如果（moviesOp<1.0）{
moviesOp=parseFloat（moviesOp，10）+0.1；
}否则{
清除间隔（计时器）；
}
}
var定时器=设置间隔（明显，1000）；


如果你想在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);

var movies=document.getElementById（'movies'）；
函数外观（）{
var moviesOp=getComputedStyle（movies）.getPropertyValue（'opacity'）；
log（'op='+moviesOp调用的间隔）；
如果（moviesOp<1.0）{
movies.style.opacity=parseFloat（moviesOp，10）+0.1；
}否则{
清除间隔（计时器）；
}
}
var定时器=设置间隔（明显，1000）；

@SethMcClaine document.ready是jQUery。@Tomas piaggio-如果你认为答案正确，请接受答案。你需要在函数内部设置
moviesOp
。否则它将始终是原始的不透明度，而不是更新的值。你需要设置新的不透明度样式。你的JSBIN对我不起作用。你为什么不使用堆栈片段代替它呢使用外部站点的ead？@Barmar-感谢您的建议，现在工作正常：）.Barmar我到目前为止还没有用户stack snipper，让我过会儿再联系你。@Barmar你需要添加/编辑链接，然后它就可以工作了。我还更改了链接，所以它现在应该可以很好地为你工作了！非常感谢，这对我是一个初学者非常有帮助。
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);