尝试使用 h1 元素的不透明度属性进行简单的淡入淡出。我正在学习 javascript，所以想尝试使用纯 javascript(是的，我知道使用 jQuery 更容易)。
仅粘贴相关片段:
<body onload="fadeIn()">
...
<div class = "container">
<div class = "row">
<div class = "col-md-3">
<img class = "img-responsive" src="icons/Website_Logo.png">
</div>
<div class = "col-md-9 page-header">
<h1 id="welcomeHeader" style="opacity:0">
Welcome to the world!
</h1>
</div>
</div>
</div>
...
<script>
function fadeIn() {
var el = document.getElementById("welcomeHeader");
var op = parseFloat(el.style.opacity);
var timer = (function () {
if(op >= 1.0)
clearInterval(timer);
op += 0.1;
el.style.opacity = op;
}, 50);
}
</script>
</body>
非常感谢您的帮助!谢谢!
最佳答案
您需要先调用 setInterval 函数才能调用计时器。休息很好。这是一个工作 fiddle
代码片段:
function fadeIn() {
var el = document.getElementById("welcomeHeader");
var op = parseFloat(el.style.opacity);
var timer = setInterval(function () {
console.log('here');
if(op >= 1.0)
clearInterval(timer);
op += 0.1;
el.style.opacity = op;
}, 50);
}
关于javascript - 淡入淡出使用纯 javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24880589/