时间戳

首页 > 解决方案 > 我试图让一个框在单击按钮时淡出？

javascript - 我试图让一个框在单击按钮时淡出？

问题描述

当我单击淡入淡出按钮时，框就消失了。我需要某种时间元素，但我似乎无法找到正确的答案。我在这里尝试了几个答案，但我不理解它们，当我尝试应用它们时没有任何效果。前往： 医生

<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>

标签： javascript

解决方案

您可以为此使用 jQuery。运行下面的代码片段并查看

$(document).ready(function() {
  $("#button1").click(function() {
    $("#box").fadeOut();
  });
   $("#button2").click(function() {
    $("#box").fadeIn();
  });
});
#box {
  width: 100px;
  height: 100px;
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="box">

</div>

<button id="button1">Fade out</button>
<button id="button2">Fade in</button>

推荐阅读