时间戳

首页 > 解决方案 > 文档准备好的淡入效果不起作用

javascript - 文档准备好的淡入效果不起作用

问题描述

显示的 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>

怎么了 ？

标签： javascriptjqueryhtmlfade

解决方案

添加display: none;“游戏” div 开始。

还要在 html 的末尾保留 script 标签

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

推荐阅读