• 카테고리

    질문 & 답변

  • 세부 분야

    풀스택

  • 해결 여부

    미해결

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

19.10.16 11:33 작성 조회수 219

2

<!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>
course-thumbnail

코알못에서 웹서비스 런칭까지 : 2021 제주 코딩 베이스캠프(Django)

애니메이션

강의실 바로가기

답변 2

·

답변을 작성해보세요.

1

주현님의 프로필

주현

질문자

2019.10.16

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

1

제주피터님의 프로필

제주피터

지식공유자

2019.10.16

안녕하세요. 유주현님!

강사 이범재입니다.

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

한번 확인해보세요.

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

이 글과 비슷한 Q&A