animate

animate : css 코드를 변화시킬때 수치를 천천히 변화시킨다 ( 부드러운 변화 효과 )

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
      window.onload = () => {
        $(".move").click(() => {
          $("img").css({ left: "300px", height: "300px", width: "350px" });
          // css 는 바로 변환
        });

        $(".init").click(() => {
          $("img").animate({ left: "0px", height: "100px", width: "130px" });
          // animate 는 수치가 천천히 변화 ( 부드러운 효과 )
        });
      };
    </script>
  </head>
  <body>
    <button class="move">확대</button>
    <button class="init">축소</button>
    <hr />
    <img
      src="resources/images/car01.png"
      width="130px"
      height="100px"
      style="position: relative"
    />
  </body>
</html>
코드 실행

확대는 css 를 변경하여 바로 크기가 커지지만, 축소는 animate 를 사용하여 천천히 부드러운 효과를 가지며 축소

728x90

+ Recent posts