Question

我也试过写一些类似于jQuery的fadeOut的简单函数，但是卡住了。一切正常，但不透明度从0.02而不是1减少，正如我用css写的那样。通过console.log（）检查代码在第一步显示为空，然后是-0.02，-0,04。这是我的代码css：

#box {
  background: red;
  height: 200px;
  opacity:1;
  width: 200px;
}

JS：

 var box = document.getElementById("box");

 setInterval(function() {
  console.log(box.style.opacity);
  box.style.opacity -= 0.02;
 }, 1000)

这是codepen http://codepen.io/Kuzyo/pen/xDc 有人可以解释发生了什么。感谢。

Answer 1

阅读CSS属性时需要window.getComputedStyle()。

 box.style.opacity = window.getComputedStyle(box).opacity - 0.02;

演示：http://jsfiddle.net/aCKNz/

Answer 2

element.style.opacity仅响应样式，如果它在元素的style="..."属性中定义，而不是在样式表中。

请改为尝试：

var box = document.getElementById('box');
(function(){var o=1;setTimeout(function(){box.style.opacity=o-=0.2;if(o>0)setTimeout(arguments.callee,1000);},1000);})();

或者，以其扩展形式：

var box = document.getElementById('box');
(function(){
    var o=1;
    setTimeout(function(){
        o -= 0.2;
        box.style.opacity = o;
        if(o>0) setTimeout(arguments.callee,1000);
    },1000);
})();

通过setInterval减少不透明度

2 个答案: