jQuery單擊以顯示圖像，然后使其延遲后消失嗎？

Question

我正在創建一個簡單的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();
});

編輯：我還將補充一點，即從現在開始單擊該按鈕僅允許我單擊一次以執行該功能。 一鍵單擊后，它只是變灰。 沒有顏色變化，沒有聲音播放。 令我迷惑的是...

Answer 1

嘗試這個 ：

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

});