jQuery单击以显示图像，然后使其延迟后消失吗？

Question

I'm creating a simple game of Simon, and I want the easiest way to code where if one of the four buttons is clicked, it changes the image for a second or so (on mode), plays a sound, then goes back to its original color. Right now I've searched, but everything I've seen has to do with divs, or other types of questions.

As of now the button changes to the on button image, plays the sound, but when I try any function to hide or fadeOut or anything of that sort, it goes to a strange greyish color, but does not disappear. I've tried to use attr() to set the image back to what it originally was with a delay in between, but that doesn't work, either. The code is long, but I'll post what's relevant...

    <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>

and from my js file...

    $("#c1").on("click", function() {
            $("#c1i").attr("src", "imgs/1.png").hide("slow");
            $("#snd1")[0].play();
});

edit: I will also add that clicking the button as of now only lets me click it once to perform the function. After one click, it just greys out. No color change, no sound played. Mystifying to me...

Answer 1

try this :

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

});