如何让文字淡出

Question

我有一个HTML表单，当点击按钮时，JavaScript会处理它，并在按钮下方出现文本，显示“表单已发送”。我想让这个文本在几秒钟后消失，比如说五秒钟。我使用以下方法来编写这段文本：

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

HTML代码框如下所示：

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

使用这个样式：

#sent_box{
height: 20px;
margin-top: 20px;
}

我应该如何在十秒钟后使文字淡出呢？

请注意，我需要使用原生JavaScript的解决方案。请不要使用JQuery。

感谢您的帮助！

- user4826496

---

你可以使用opacity: 0;添加一个类，并添加CSS3过渡效果。 - Aaroniker

你尝试过某件事吗？ - SDekov

@Mr.Chameleon，我提供的答案是纯JS代码，而不是JQuery代码。你可以向下滚动查看我在答案中放置的链接，确认它确实是纯JS代码。另外，你应该勾选“animations”复选框以获取该代码。 - BahaEddine Ayadi

@Mr.Chameleon：所以你应该明确指出它只是JS，不必说Vanilla JS。我会编辑我的答案，使其成为一个纯JS解决方案。 - BahaEddine Ayadi

@ayadibaha 当有人说“vanilla javascript”时，他们指的是普通的javascript。这是一个相当常用的术语。在回答问题之前，请确保你理解了问题。 - user4826496

Answer 1

您可以使用纯JS实现此操作。

我已经为每行JS添加了注释，以便您理解和学习以备将来参考。

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

<div id="fade">Test</div>

- Stewartside

Answer 2

这里有一个更简单的选项。

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>

- NukY

Answer 3

为什么不使用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;}

- John williams

---

OP仍需要JavaScript...它在哪里？ - Paulie_D

你为什么要使用带有webkit前缀的属性？虽然有合理的原因可以这样做，但是为什么你只使用带有webkit前缀的属性呢？ - Quentin

JSFIDDLE什么也没做。DIV只是静静地坐在那里，什么也没做。 - user4826496

真不可思议，有多少人在没有读完整个问题的情况下就写出了答案。 - user4826496