Question

我的目的：我正在尝试使用Javascript创建一个fadeout事件。

这是我的代码：

<!DOCTYPE html>
<html>
<head>

<script>

function changeOpacity(){

 var finalOpacity = 0 ;
 var currentOpacity = document.getElementById("slide").style.opacity ;
 if(currentOpacity > finalOpacity){
  currentOpacity = currentOpacity - 0.01;
  document.getElementById("slide").style.opacity = currentOpacity ;
  setTimeout(function(){changeOpacity();},10);   
 }
}

</script>

<style type="text/css">

#slide{
 opacity:1;
 width:200px;
 height:100px;
 background:green;
}

</style>

</head>


<body>

 <div id="slide" ></div>
 <button  onclick="changeOpacity();">Slide</button>

</body>
</html>

我正在学习Javascript。如果您通过一些解释帮助我纠正代码将会很有帮助

Answer 1

您的代码存在的问题是，您无法通过CSS访问element.style设置的样式。您需要改为使用getComputedStyle(element)。

因此，在您的示例中，只需更改

即可

var currentOpacity = document.getElementById("slide").style.opacity;

到

var currentOpacity = getComputedStyle(document.getElementById("slide")).opacity;

工作fiddle

请注意，opacity: 0元素仍会占用指定空间。 opacity: 0与display: none

的效果不同

Answer 2

我想你忘了初始化你的开始不透明度值：

 var currentOpacity = document.getElementById("slide").style.opacity || 1;

Answer 3

您还可以决定在DOM中添加正确的不透明度：

<div id="slide" style="opacity:1;"></div>

因为element.style.opacity js属性只获取DOM内的css属性。

淡出不适用于javascript

3 个答案: