我的 jQuery 函数得到了一些有趣的结果。我正在运行的代码如下所示:
$(document).ready(function(){ //Fade menu when play is pressed
$('input').click(function(){
$('menu').fadeOut(1000);
});
});
它在我的 HTML 中是这样使用的:
<!DOCTYPE html>
<html>
<head>
<script src='three.min.js'></script>
<script src='cannon.min.js'></script>
<script src='jquery2.2.2.min.js'></script>
<script src='game.js'></script>
<script src='jquery.js'></script>
<title>really beta game lmaoo</title>
<meta charset="utf-8">
<style>
body {
background-image:url('Images/backgroundImg.jpg');
background-repeat:no-repeat;
background-size:cover;
}
input {
position:absolute;
bottom:21%;
right:40%;
}
</style>
</head>
<body>
<menu>
<embed src='Audio/backgroundMusic.mp3' autoplay='true' loop='true' width='0' height='0'/>
<input type='image' src='Images/start.jpg' width='275' height='150' onclick='INIT_GAME();'/>
</menu>
</body>
</html>
脚本产生了一个有趣的黑框效果，这在整个淡入淡出过程中都很明显。这是因为 <input>标签立即从我的 JavaScript 加载脚本，这会触发我正在制作的游戏。我试图淡出整个背景和按钮，然后直接进入游戏。屏幕尺寸似乎也发生了变化，因为加载游戏时会出现滚动条。我也不想要这种效果。我的问题是:
- 如何淡出 CSS 正文样式中的背景图像？
- 如何调用
INIT_GAME()fadeOut 之后的功能 完成了吗？ - 我使用的 CSS 样式是否与我使用的 HTML 元素冲突？ 因同名想互动？
可以在这里查看效果:
https://scrigbildefense-browntj.c9users.io/main.html
欢迎任何帮助，谢谢!
最佳答案
关于fadeOut，阿龙的回答是fade后执行完成的功能:
$(document).ready(function(){ //Fade menu when play is pressed
$('input').click(function(){
$('menu').fadeOut(1000, function(d){ //function is called after animation completes.
INIT_GAME();
});
});
});
您可能还想查看选项，请参阅 http://api.jquery.com/fadeout/
至于你的背景图片淡入淡出，你最好在 body 中加载一张图片，然后使用相同的技术淡出该图片。 ASAIK，你不能淡化 css 背景。
您当前的代码没有与您的任何 CSS 名称冲突。
只要记住选择器的规则，这是我一直思考的方式:
TEXT = element.type
#TEXT = element.id
.TEXT = element.class
以上都不是官方的，这只是我内存中的 jquery 选择器的方式。这也应该有助于您确保避免任何冲突。
关于javascript - jQuery 函数问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36231242/