对于淡入有两种方法:
一、利用法
<html>
<body>
<div
id="fade-obj"
style="width: 300px; height: 300px; background: #000"
></div>
<button id="fade-btn">淡出</button>
<script>
let div = document.querySelector("div");
div.style.opacity = 0;
function danchu() {
if (div.style.opacity >= 0) {
div.style.opacity -= -0.001;//这行代码很关键,作用是让opacity的值增大。
setTimeout("danchu()",1);
}
}
danchu();
</script>
</body>
</html>
这种方法利用了JS中的类型自动转换:当字符串与数字相减时,结果等于数字(如果字符串与数字相加,结果等于字符串,虽然opacity可以接收字符串和数字,但这样不能计算出想要的结果,于是为了达到想要的效果,可以使用方法二,转化一下类型就好啦!)
"5" + 2 // 返回 52 因为 2 被转换为 "2"
"5" - 2 // 返回 3 因为 "5" 被转换为 5
二、转换法
if (div.style.opacity >= 0) {
div.style.opacity = Number(div.style.opacity) + 0.001;
setTimeout("danchu()",1);
}
我觉得用方法二比较好,这样写很清楚。方法一比较抖机灵。
淡出同理啦!