如何淡出我的 div？

Question

我的div在这里

<div id="myBox" style="position: absolute; top: 100px; width: 100px; height: 100px;">

我使用了这个代码示例，但它不起作用。有什么建议吗？

<script type=text/javascript>
    setTimeout(function() {
        $('#myBox').fadeOut('fast');
}, 10000); //after 10 seconds 
</script>

Answer 1

有效：（减少到 1 秒）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="myBox" style="position: absolute; top: 100px; width: 100px; height: 100px;">
  i used this sample of code and it doesn't work. Any suggestions?
</div>
<script type=text/javascript>
  setTimeout(function() {
    $('#myBox').fadeOut('fast');
  }, 1000); //after 10 seconds
</script>

你包括了JQuery吗？如果其他地方有错误，请告诉我们完整的代码。

Answer 2

这是一个 css 方法，因为这个问题是 css

下的标签

#myBox {
  opacity:1;
 animation-name:fadeout;
 animation-duration:1s;
 animation-delay:10s;
 animation-fill-mode: forwards;
 }
@keyframes fadeout {
from {
 opacity:1;
}
to {
 opacity:0;
}

<div id="myBox" style="position: absolute; top: 100px; width: 100px; height: 100px;">
Hello world
</div>

Answer 3

我肯定会考虑使用 animate.css

它让你使用一些很棒css动画非常容易，并且还给你跨浏览器兼容性！

如何淡出我的 div？

How to fade out my div?

html

css

jquery

fadeout