淡入淡出对文档准备就绪不起作用

Question

显示Jquery中使用的淡入淡出效果不起作用，为什么？

$(function() {
  $(document).ready(function() {
    $('.Game').fadeIn(500);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">
  <h1 class="Game">Darkness Island</h1>
  <h2>Available soon</h2>
  <button class="Download">Download</button>
  <button class="Details">See details</button>
</div>

怎么了？

Answer 1

在 "Game" div 上添加 display: none; 作为开头。

同时在 html

末尾保留脚本标记

 $(document).ready(function () {
      $('.Game').fadeIn(500);
   });

最重要的是，在 head 标签中包含 jquery。

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div class="text">
    <h1 class="Game" style="display: none;">Darkness Island</h1>
    <h2>Available soon</h2>
    <button class="Download">Download</button>
    <button class="Details">See details</button>
</div>
<script>
  $(document).ready(function () {
$('.Game').fadeIn(500);
  });
</script>

Answer 2

在您可以使用 fadeIn 功能之前，该项目不应可见。

这个例子应该有效

$(function(){
  $(document).ready(function () {
   $('.Game').fadeOut();
   $('.Game').fadeIn(500);
  });
});

淡入淡出对文档准备就绪不起作用

Fade in effect on document ready doesn't work

javascript

jquery

html

fade