Javascript Html/jQuery：使div消失并在下面使用Canvas

我有一个帆布刮擦卡游戏，我想把'玩'的形象，当它按下的形象应该消失，用户可以开始玩

我的图像消失了1/2秒，然后又出现了。这可能是我不太擅长的一些CSS魔法

谢谢你的帮助

<div id="canvasImage" class="col-1-2">
  <div class="play-hover">
    <img id="img"class="img-hover"src="resource/images/play.png"
     onclick="prices()">
    </img>
  </div>

<script>
  $(function() {
    $(document).on("click",function (e) {
      if (e.target.id=="img") {
        $("#canvas").fadeToggle(200);
        e.stopPropagation();
        return false;
      }
    });
  });
</script>

<canvas id="canvas"></canvas>

  <script>
  this.go = function(data){

    $(function(){
      var canvas = document.getElementById("canvas");

      canvas.height = window.innerHeight;
      canvas.width = window.innerWidth;
      var scratch_layer = new ScratchMask(canvas, "resource/images/paris.png", canvas.width, 
      canvas.height, data,
        function(){
            console.log("success2");

        }
    );

    $(".loading").remove();
  })
  }        

$（函数（）{
$（文档）。在（“单击”）上，函数（e）{
如果（如target.id==“img”）{
美元("画布").淡入淡出(200);；
e、 停止传播（）；
返回false；
}
});
});
this.go=函数（数据）{
$（函数（）{
var canvas=document.getElementById（“canvas”）；
canvas.height=window.innerHeight；
canvas.width=window.innerWidth；
var scratch_layer=新的ScratchMask（canvas，“resource/images/paris.png”，canvas.width，
画布、高度、数据、，
函数（）{
console.log（“success2”）；
}
);
$（“.loading”）.remove（）；
})
}        

您可以使用上述解决方案吗

setTimeOut

功能将根据您提到的时间自动消失图像

$(document).ready(function() {
  setTimeout(function(){$("#canvasImage").fadeOut(1500); } ,3000);
});