Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

有什么问题？

Answer 1

在“Game”div上添加display: none;以开始。

同时将脚本标记保留在html的末尾

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

最重要的是，在头标记中包含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);
  });
});

淡入淡出文档已经无法正常工作

2 个答案: