jQuery hide（）然后show（）a <div>没有完全隐藏页面加载上的<div>

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()中有这个，它就不会运行你的JavaScript直到DOM完成渲染。

您可以通过使用内联样式或CSS将<h1>设置为display: none;来确保隐藏$('h1.page_heading_title').fadeIn(666);：

＆＃13;

＆＃13;

h1.page_heading_title {
  display: none;
}

＆＃13;

<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>

＆＃13;

$(function() {
  $('h1.page_heading_title').fadeIn(666)
});

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以使用display:none作为div的样式，然后使用js的fadeIn()。无需使用addClass()，如下所示：

$('div').fadeIn(666);

div{
 display:none;
}

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

<div>A div</div>

Answer 3

你应该能够简单地将display：none设置为元素的样式，然后使用淡入。

示例：

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="page_heading_title" style="display:none">My Header</h1>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;