我制作了一个 div 和一个 button。在 JavaScript 中创建了一个更改 div 不透明度的函数。
然后我制作了一个不透明度数组和一个 for 循环，并在每个循环上保留了我想要的不透明度。但不知道哪里出了问题？
请不要给我建议，比如我应该使用 jQuery 或其他库。我想用 JavaScript 来做!(没有任何库)
这里看我的代码:-
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/jpg" href="http://s3images.coroflot.com/user_files/individual_files/original_240004_eFk2sUc1K3KyXWz60vHrALo5H.jpg">
<title>JavaScript</title>
<style>
body
{
font-family:ebrima;
color:black;
}
#box
{
height:100px;
width:100px;
background:red;
opacity:1;
}
</style>
</head>
<body id="mainBody">
<div id="box"></div>
<button type="button" id="b" onClick="lessTheOppacity()">OPACITY</button>
<script>
function lessTheOppacity()
{
var box = document.getElementById("box");
var oppArray = ["0.9", "0.8", "0.7", "0.6", "0.5", "0.4", "0.3", "0.2", "0.1", "0"];
for (var x = 0; x < 10;x++)
{
box.style.opacity=oppArray[x];
}
}
</script>
</body>
</html>
最佳答案
function lessTheOppacity()
{
var box = document.getElementById("box");
var oppArray = ["0.9", "0.8", "0.7", "0.6", "0.5", "0.4", "0.3", "0.2", "0.1", "0"];
var x = 0;
(function next() {
box.style.opacity = oppArray[x];
if(++x < oppArray.length) {
setTimeout(next, 100); //depending on how fast you want to fade
}
})();
}
说明:
(1) next 是一个将我们推进到下一个不透明度的函数。我随意选择了它的名字。
(function next() {
...
})();
定义函数，然后立即调用它。
(2) ++x 表示“将 x 的值增加 1，然后给我该值”。我们用它来增加 x 并检查是否需要继续淡入淡出元素。
(3) 我们希望随着时间的推移逐渐发生褪色。您的情况同时发生，因此用户只能看到最后一个，"0.0"。
这里，setTimeout 在调用 next 函数并进入下一个不透明度之前等待 100 毫秒。
参见setTimeout文档以获取更多信息。
进一步说明:
更灵活的方法是允许淡入淡出时间变化，并相应地计算步骤，而不总是有十个，或者具有非线性淡入淡出。但这更复杂，这就是人们通常使用 jQuery 的原因。
// this does a linear fade
function fade(element, duration) {
var start = new Date;
(function next() {
var time = new Date - start;
if(time < duration) {
box.style.opacity = 1 - time / duration;
requestAnimationFrame(next);
} else {
box.style.opacity = '0';
}
})();
}
此外，如果您可以依赖支持 CSS3 转换的浏览器，我会考虑这样做。它更干净，通常是首选。
关于javascript - 如何使用这样的代码使 div 淡出而不是消失？ (JavaScript)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21359232/