jQuery 예습

스타크래프트 레이스 클로킹

[결과]

[코드]

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>starcraft</title>
    <style>
      #cloaking {
        position: absolute;
        top: 50px;
        left: 50px;
        cursor: pointer;
      }
      #wraith {
        position: absolute;
        top: 50px;
        left: 100px;
      }


    </style>
  </head>
  <body>
    <img id="cloaking" src="../img/cloaking.png" alt="cloaking">
    <img id="wraith" src="../img/wraith.png" alt="wraith">
    <script
      src="https://code.jquery.com/jquery-3.6.4.js"
      integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E="
      crossorigin="anonymous">
    </script>
    <script>
      $(document).ready(function(){
        $("#cloaking").click(function(){
          $("#wraith").fadeToggle(1000)
        })
      })
    </script>
    </body>
</html>