Question

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

由于

Answer 1

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

＆＃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;

为什么fadeIn选项不起作用？

1 个答案: