javascript - jQuery hide() Then show() 在页面加载时没有完全隐藏

Question

目标:页面加载时，慢慢显示页面加载时看不到的 div。

当前代码:

$('h1.page_heading_title').hide().fadeIn(666);

问题:使用上面的代码时，div 拳头在页面加载时显示，然后隐藏，然后慢慢淡入。这给用户带来了故障效果。

想法:有没有我在这里完全隐藏 div 然后 fadein() 缺少的东西？我能想到的下一个解决方案是将 div 编辑为 display:none，然后使用 addClass() 添加一个使用 css 动画的 div 类来完成我的任务。我唯一担心的是，理论上 jquery 应该已经用 .hide().fadIn() 做的事情看起来确实有很多代码。

如有任何帮助，我们将不胜感激。

Answer 1

听起来您的页面加载有点慢。假设你在 $(document).ready() 中有这个，在 DOM 完成渲染之前，它不会运行您的 JavaScript。

您可以确保 <h1>通过将其设置为 display: none; 在加载前隐藏，使用内联样式或 CSS:

$('h1.page_heading_title').fadeIn(666);

h1.page_heading_title {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="page_heading_title">This is a heading.</h1>