淡入淡出对文档就绪无效
[英]Fade in effect on document ready doesn't work
问题描述
显示的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>
怎么了 ？
2 个解决方案
解决方案1
1 已采纳 2018-06-10 18:07:49
添加display: none; 在“游戏” div上开始。
还要将脚本标记保留在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>
解决方案2
0 2018-06-10 18:13:07
在使用fadeIn功能之前，该项目应该不可见。
这个例子应该工作
$(function(){
$(document).ready(function () {
$('.Game').fadeOut();
$('.Game').fadeIn(500);
});
});
$（document）.ready（）不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.