강의랑 똑같이 쳤는데 item, btn들은 잘 나오는데, 클릭해도 애니메이션 효과가 적용되지 않습니다..ㅠㅠ 왜일까요....

미해결질문
주현 프로필
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .item-container {
      margin: 20px;
      padding: 20px;
      display: flex;
    }
    .item-container .item {
      width: 100px;
      height: 100px;
      margin: 20px;
      padding: 20px;
      border: 1px solid black;
    }

    #item1 {
      background-color: #fbffb9;
    }
    #item2 {
      background-color: #ec7357;
    }

  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>

  <script>
    $(function(){
      $("#btn1").on("click", function(){
        $("#itme1").fadeuOut();
      });

      $("#btn2").on("click", function(){
        $("#itme1").fadeuIn();
      });

      $("#btn3").on("click", function(){
        $("#itme2").slideUp();
      });

      $("#btn4").on("click", function(){
        $("#itme2").slideDown();
      });

      $("#btn5").on("click", function(){
        $("#itme2".slideToggle();
      });
    });
</script>

</head>
<body>
    <div id="box1" class="item-container">
      <div class="item" id="item1"><strong>Java</strong></div>
      <div class="item" id="item2"><strong>python</strong></div>
    </div>

    <div>
      <button id="btn1">fade out</button>
      <button id="btn2">fadein</button>
      <button id="btn3">slideup</button>
      <button id="btn4">slidedown</button>
      <button id="btn5">slidetoggle</button>

    </div>
</body>
</html>
이범재 이 프로필
이범재 이 8달 전

안녕하세요. 유주현님!

강사 이범재입니다.

오타를 수정했더니 잘 되네요.

한번 확인해보세요.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .item-container {
      margin: 20px;
      padding: 20px;
      display: flex;
    }

    .item-container .item {
      width: 100px;
      height: 100px;
      margin: 20px;
      padding: 20px;
      border: 1px solid black;
    }

    #item1 {
      background-color: #fbffb9;
    }

    #item2 {
      background-color: #ec7357;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>

  <script>
    $(function () {
      $("#btn1").on("click", function () {
        $("#item1").fadeOut();
      });

      $("#btn2").on("click", function () {
        $("#item1").fadeIn();
      });

      $("#btn3").on("click", function () {
        $("#item2").slideUp();
      });

      $("#btn4").on("click", function () {
        $("#item2").slideDown();
      });

      $("#btn5").on("click", function () {
        $("#item2").slideToggle();
      });
    });
  </script>

</head>

<body>
  <div id="box1" class="item-container">
    <div class="item" id="item1"><strong>Java</strong></div>
    <div class="item" id="item2"><strong>python</strong></div>
  </div>

  <div>
    <button id="btn1">fade out</button>
    <button id="btn2">fadein</button>
    <button id="btn3">slideup</button>
    <button id="btn4">slidedown</button>
    <button id="btn5">slidetoggle</button>

  </div>
</body>

</html>
주현 프로필
주현 8달 전

와 엄청 여러번 봤는데도 못봤었던건데.. 감사합니다ㅜㅜ!!

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스