javascript - 文档就绪时淡入淡出效果不起作用

标签 javascript jquery html fade

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

出了什么问题?

最佳答案

首先在“Game”div 上添加 display: none;

同时将 script 标记保留在 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>

关于javascript - 文档就绪时淡入淡出效果不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50786616/

相关文章:

javascript - 当用户滚动时在网页上画一条曲线

javascript - jQuery fadeIn() 未达到完全不透明

javascript - ThreeJS - 像聚光灯一样的点光阴影

javascript - 表单中的多个页面

javascript - JSPDF - 如何删除 pdf 下载中的空白最后一页

javascript - 在javascript中访问vue js对象

javascript - 为什么 React-boilerplate selector.js 导出调用 createSelector 的方法而不是直接导出选择器?

javascript - 无法输出值: JavaScript

javascript - 如何从日期时间选择器中获取日期作为字符串?

javascript - 如何隐藏和滑动面板?