Javascript 如何使文本淡出

我有一个HTML表单，点击一个按钮，javascript就会处理它，按钮下方会显示文本，上面写着“表单已发送”。我想让这段文字在几秒钟后消失，比如说五秒钟左右。首先，我使用这种方法来编写文本：

document.getElementById('sent_box').innerHTML='form sent.';

要写入的HTML框如下所示：

<div id='sent_box'></div>

我怎样才能使文本在十秒钟后淡出

注意，我需要一个普通的Javascript解决方案来解决这个问题。请不要回答JQuery。

---

谢谢你的帮助

为什么不使用css3呢。下面链接到JSFIDLE以获取示例

---

您可以使用纯JS来实现这一点

我已经为JS的每一行添加了注释，以便您能够理解和学习，以供将来参考

setTimeout（函数（）{//启动延迟
var fade=document.getElementById（“fade”）；//获取所需元素
fade.style.opacity=1；//将元素的不透明度设置为1
var timerId=setInterval（函数（）{//开始间隔循环
var opacity=fade.style.opacity；//获取当前不透明度
如果（不透明度==0）{//检查其是否为0
clearInterval（timerId）；//如果是，则退出interval循环
}否则{
fade.style.opacity=不透明度-0.05；//否则从不透明度中删除0.05
}
}，100）；//每0.1秒运行一次
}, 5000); // 等待5秒后运行

---

测试

这里有一个更简单的选项

CSS：

<style>
#objecttofade{
             color: white;
             opacity: 1;             //set opacity to 1 so it will be fully visible
             transition: all 0.25s; //you can change the duration of the transition
             }
<style>

#objecttofade{
颜色：白色；
不透明度：1；//将不透明度设置为1，使其完全可见
转换：所有0.25s；//您可以更改转换的持续时间
}

JS:

function change（）{//assign onload或onclick
document.getElementById（'p1'）.style.opacity=“0”；}//将不透明度更改为0

您可以添加不透明度为0的类和add css3 transitions您尝试过什么吗？如果没有jQuery，最简单的方法可能是设置css3动画以淡出元素，然后在设置的时间后用JavaScript触发它。（这篇文章使用jQuery，但概念可以在没有jQuery的情况下应用）。@oxguy3不幸的是，Artils使用了jQuery，我并没有特别要求它。@ayadibaha当有人说香草javascript时，他们的意思是普通javascript。这是一个非常常用的术语。在回答问题之前，请确保您理解了问题。OP仍然需要javascript…那是什么？为什么要使用带前缀的webkit属性？虽然这样做有可以接受的理由，但为什么只使用webkit前缀属性呢？JSFIDLE什么都不做。div只是坐在那里，什么也不做。令人难以置信的是，有多少人在没有阅读整个问题的情况下写下了答案。

 @-webkit-keyframes fade-out {
0% { opacity: 1; -webkit-transform: scale(1);}
85% {opacity: 1; -webkit-transform: scale(1.05);}
100% {-webkit-transform: scale(.1); opacity: 0;}
}

.fade-out {
    -webkit-animation: fade-out .5s ease-in;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    background-color: #000;
    width: 100px;
    height: 100px;
    opacity: 1;
}

.fade-out.one {-webkit-animation-delay: .5s;}
.fade-out.two {-webkit-animation-delay: 1.5s;}
.fade-out.three {-webkit-animation-delay: 2.5s;}
.fade-out.four {-webkit-animation-delay: 5.5s;}

<style>
#objecttofade{
             color: white;
             opacity: 1;             //set opacity to 1 so it will be fully visible
             transition: all 0.25s; //you can change the duration of the transition
             }
<style>

<script> function change(){                        //assign onload or onclick
    document.getElementById('p1').style.opacity = "0";}//changes opacity to 0
</script>