[英]JQuery clicking to show image, then making it disappear after delay?
我正在创建一个简单的Simon游戏,我想以最简单的方式编写代码:如果单击四个按钮之一,它将更改图像一秒钟左右(在模式下),播放声音,然后返回到它的原始颜色。 目前,我已经进行了搜索,但是看到的所有内容都与div或其他类型的问题有关。
截至目前,按钮变为按钮上的图像,播放声音,但是当我尝试使用任何功能隐藏或淡出或类似功能时,它会变成一种奇怪的灰色,但不会消失。 我尝试使用attr()将图像设置回原来的状态,并且之间有一定的延迟,但这也不起作用。 代码很长,但我会发布相关内容...
<audio src="sounds/1.mp3" id ="snd1"></audio>
<audio src="sounds/2.mp3" id ="snd2"></audio>
<audio src="sounds/3.mp3" id ="snd3"></audio>
<audio src="sounds/4.mp3" id ="snd4"></audio>
<div id="juego">
<div id="simon">
<div id="c1"><img id ="c1i" src="imgs/d1.png"></div>
<div id="c2"><img id ="c2i" src="imgs/d2.png"></div>
<div id="c3"><img id ="c3i" src="imgs/d3.png"></div>
<div id="c4"><img id ="c4i" src="imgs/d4.png"></div>
</div>
并从我的js文件中...
$("#c1").on("click", function() {
$("#c1i").attr("src", "imgs/1.png").hide("slow");
$("#snd1")[0].play();
});
编辑:我还将补充一点,即从现在开始单击该按钮仅允许我单击一次以执行该功能。 一键单击后,它只是变灰。 没有颜色变化,没有声音播放。 令我迷惑的是...
尝试这个 :
$("#c1").on("click", function() {
// change the image , and make sure this image path exists ...
$("#c1i").attr("src", "imgs/1.png");
// make it disappear and play the sound after 1 second
setTimeout(function(){
$("#c1i").hide();
$("#snd1")[0].play();
},1000);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.