为什么fadeIn选项不起作用?

时间:2017-04-07 23:32:32

标签: jquery html5

</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选项不起作用?当我们鼠标悬停身体内容时如何显示导航栏?

由于

1 个答案:

答案 0 :(得分:1)

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

&#13;
&#13;
$(document).ready(function(){
  $("#meat").hide();
  $("#meat").fadeIn(3000);
  $("#meat").hover(function (){
    $("#navbar").stop(true,true).fadeToggle("slow");
  });
});
&#13;
#navbar {
  position:fixed;
  display:none;
}
&#13;
<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>
&#13;
&#13;
&#13;