为什么 fadeIn 选项不起作用？

【问题标题】：why isn't the fadeIn option working?为什么 fadeIn 选项不起作用？
【发布时间】：2017-04-08 07:39:04
【问题描述】：

</header>
<section id="video">
<video autoplay loop class="video">

<source src="ink.mp4" type="video/mp4">
</video>
</section>
<section id="meat">
<P>
<span class="first">  XXXXXX</span>
<br/>
<span class="second">  xxxxx </span>
</P>
</section>
<footer id="end_page">
</footer>
<script>
$(document).ready(function(){
$("#meat"). fadeIn("slow");
});

//我希望页面加载后内容慢慢淡入。为什么 fadeIn 选项不起作用？当我们将鼠标悬停在正文内容上时如何显示导航栏？

谢谢

【问题讨论】：

标签： jquery html

【解决方案1】：

您在显示该项目之前忘记隐藏。由于它已经可见，jQuery 什么也没做。至于你的第二个问题，我们可以添加一个hover 事件：

$(document).ready(function(){
  $("#meat").hide();
  $("#meat").fadeIn(3000);
  $("#meat").hover(function (){
    $("#navbar").stop(true,true).fadeToggle("slow");
  });
});

#navbar {
  position:fixed;
  display:none;
}

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

<div id="navbar"><a href="#">test</a></div>
<section id="video">
<video autoplay loop class="video">

<source src="ink.mp4" type="video/mp4">
</video>
</section>
<section id="meat">
<P>
<span class="first">  XXXXXX</span>
<br/>
<span class="second">  xxxxx </span>
</P>
</section>
<footer id="end_page">
</footer>

【讨论】：