JQuery点击显示图像,然后让它在延迟后消失?

时间:2014-05-31 14:23:12

标签: javascript jquery html

我正在创建一个简单的Simon游戏,我想要最简单的编码方式,如果单击四个按钮之一,它会将图像更改一秒左右(在模式下),播放声音,然后恢复原来的颜色。现在我已经搜索过,但我看到的一切都与div或其他类型的问题有关。

截至目前,按钮变为开启按钮图像,播放声音,但当我尝试隐藏任何功能或fadeOut或其他任何类型时,它会变成奇怪的灰色,但不会消失。我已经尝试使用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();
});

编辑:我还要补充一点,现在点击按钮只允许我点击一次以执行该功能。点击一下,它就会变灰了。没有颜色变化,没有播放声音。对我来说很神秘......

1 个答案:

答案 0 :(得分:0)

试试这个:

$("#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);

});