Question

我正在个人网站上工作，我希望我的页面最初显示为空白。然后标题在大约一秒后消失，然后导航栏在此之后消失。

我只学会了如何在点击时制作淡入淡出的东西，所以我一直在寻找帮助，让它们在页面加载后自动淡入淡出。

谢谢！

Answer 1

您可以在$(document).ready中使用jQuery .delay：

$(document).ready(function() {
      console.log("document ready occurred!");
      // Add your animations is here:
      var myHeader = $('#header');
      myHerader.delay(500).fadeIn('300');
});

您可以使用动画，也可以使用animate.css

Answer 2

animate.css库可能对此有所帮助：https://daneden.github.io/animate.css/

你想要做的是安装库并写一些这样的css：

<p class="animated fadeIn">Hello World</p>

当页面加载时，动画将立即发生而不会发生任何点击事件。

以下是小提琴的链接：https://jsfiddle.net/txx00wzr/

希望这有帮助。

Answer 3

您应首先隐藏您的项目，使用jQuery的.ready()事件来触发.fadeIn()。 .fadeIn()函数接受一个允许您链接动画的回调参数。

这是一个简单的例子：

＆＃13;

$(function() {
  $(".header").fadeIn(5000, function() {
    $(".header nav").fadeIn(5000);
  });
});

＆＃13;

.header {
  display: none;
  height: 100px;
  width: 100%;
  background-color: #ccc;
}

.header nav {
  display: none;
  list-style-type: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="header">
  <nav>
    <ul>
      <li>Nav 1</li>
      <li>Nav 2</li>
      <li>Nav 3</li>
      <li>Nav 4</li>
      <li>Nav 5</li>
    </ul>
  </nav>
</div>

＆＃13;

Answer 4

如果您想使用纯JavaScript，我建议您最初为所有display: none;个孩子指定body样式，然后使用onload这样的事件：{{1} }
函数<body onload="fade_in();">必须使元素可见。我用了这行代码：
fade_in()

如果您希望它们不是立即显示，而是顺利显示，只需将document.getElementById( "<element_id>" ).style.display = "block";设置为您需要的值。

要延迟，您可以使用transition功能：setTimeout() on W3Schools

如果我理解正确，解决方案就是这么简单。

页面打开时文本自动淡出？

4 个答案: