Javascript 我正在尝试使一个框在单击按钮时淡出？

当我点击淡入淡出按钮时，框就消失了。我需要一些时间元素，但我似乎找不到正确的答案。我在slack上尝试了几个答案，但我不理解它们，当我尝试应用它们时，没有任何效果。致：博士

<script type="text/javascript">

document.getElementById("button1").addEventListener("click", function(){

document.getElementById("box").style.height = "300px";

});

document.getElementById("button2").addEventListener("click", function(){

document.getElementById("box").style.backgroundColor = "blue";

});

document.getElementById("button3").addEventListener("click", function (){  

document.getElementById("box").style.opacity = 0.0;

});


document.getElementById("button4").addEventListener("click", function(){

document.getElementById("box").style.height = "150px";

document.getElementById("box").style.backgroundColor = "orange";

});

</script>

document.getElementById（“button1”）.addEventListener（“单击”，函数）（）{
document.getElementById（“box”）.style.height=“300px”；
});
document.getElementById（“button2”）.addEventListener（“单击”，函数）（）{
document.getElementById（“box”）.style.backgroundColor=“蓝色”；
});
document.getElementById（“button3”）.addEventListener（“单击”，函数（）{
document.getElementById（“box”）.style.opacity=0.0；
});
document.getElementById（“button4”）.addEventListener（“单击”，函数（）{
document.getElementById（“box”）.style.height=“150px”；
document.getElementById（“box”）.style.backgroundColor=“橙色”；
});

您可以执行以下操作：

...
.fadeout {
   animation: 1s linear fadeaway;
}

@keyframes fadeaway {
   from {opacity:1}
   to {opacity:0}
}
</style>

<script>
...
document.getElementById("button3").addEventListener("click", () => document.querySelector('#box').className += 'fadeout'));
</script>

---

您可以使用jQuery进行此操作。 运行下面的代码段并查看

$（文档）.ready（函数（）{
$（“#按钮1”）。单击（函数（）{
$（“#框”）.fadeOut（）；
});
$（“#按钮2”）。单击（函数（）{
$（“#框”）.fadeIn（）；
});
});
#框{
宽度：100px；
高度：100px；
背景色：红色；
}

淡出
淡入
是否正在查找设置超时？
$('#button3').on('click', () => $('#box').fadeOut(500);