gpt4 book ai didi

javascript - jQuery 函数问题

转载 作者:行者123 更新时间:2023-11-28 06:10:02 25 4
gpt4 key购买 nike

我的 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com