我如何从1不透明度到0但逐渐？我是javascript的新手，想知道如何通过单击按钮来淡化元素。这段代码是用来播放和暂停我网站上的一个视频的。这个想法是，一旦你点击播放按钮，按钮就会逐渐消失，显示视频。据我所知，我已经设置了一个变量，它可以一次性降低不透明度，但现在是逐步的。以下是到目前为止尝试的结果：
<video loop id="myVideo">
<source src="y-join_vid.mp4" type="video/mp4">
</video>
<div class="play_area">
<div>
<img src="x-join_img.png" onclick="playVid()" id="mybtn">
</div>
</div>
<script>
var vid = document.getElementById("myVideo");
var btn = document.getElementById("mybtn")
function playVid() {
vid.play();
btn.style.opacity= "0.0"
}
</script>
有两个选项，CSS或JS
在CSS中：
#mybtn {
opacity: 1;
transition: opacity 2s ease;
}
#mybtn.clicked {
opacity: 0;
}
那么您需要在js中创建一个事件侦听器：
const btn = document.querySelector("#mybtn");
btn.addEventListener("click", ()=> {
btn.classList.toggle("clicked");
}
如果您想要一个纯JS方法，请尝试以下操作：
const fadeOut = () => {
const btn = document.querySelector("#mybtn");
let i = +btn.style.opacity;
i -= 0.05; //this controls the fadeout speed
el.style.opacity = i;
if (i > 0) requestAnimationFrame(fadeOut);
}
然后调用函数并传递元素：
const btn = document.querySelector("#mybtn");
btn.addEventListener("click", fadeOut);
