我有一个HTML表单,按下按钮,javascript处理它,文本出现在按钮下方,说“发送表单”。我想让这个文字在几秒钟之后逐渐消失,比如大约五秒钟。我正在使用这种方法来编写文本:
document.getElementById('sent_box').innerHTML='form sent.';
正在编写的HTML框如下所示:
<div id='sent_box'></div>
使用这种样式:
#sent_box{
height: 20px;
margin-top: 20px;
}
我怎样才能让文字在十秒钟后淡出?
请注意,我需要一个Vanilla Javascript解决方案。请不要JQuery答案。
感谢您的帮助!
答案 0 :(得分:2)
你可以用纯JS做到这一点。
我已经为JS的每一行添加了评论,以便您可以理解并学习以供将来参考。
var a = document.getElementById(val);
a.parentNode.removeChild(a);
&#13;
setTimeout(function() { // start a delay
var fade = document.getElementById("fade"); // get required element
fade.style.opacity = 1; // set opacity for the element to 1
var timerId = setInterval(function() { // start interval loop
var opacity = fade.style.opacity; // get current opacity
if (opacity == 0) { // check if its 0 yet
clearInterval(timerId); // if so, exit from interval loop
} else {
fade.style.opacity = opacity - 0.05; // else remove 0.05 from opacity
}
}, 100); // run every 0.1 second
}, 5000); // wait to run after 5 seconds
&#13;
答案 1 :(得分:0)
这是一个更简单的选择。
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>
JS:
<script> function change(){ //assign onload or onclick
document.getElementById('p1').style.opacity = "0";}//changes opacity to 0
</script>
答案 2 :(得分:-2)
为什么不使用css 3.请点击此链接获取jsfiddle的示例。
http://jsfiddle.net/nZjEL/179/
@-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;}