SeouliteLab

jQuery .animate() 메서드의 활용 예제와 설명 본문

프로그래밍

jQuery .animate() 메서드의 활용 예제와 설명

Seoulite Lab 2024. 4. 1. 08:34

jQuery의 .animate() 메서드는 HTML 요소의 스타일 속성을 부드럽게 변경하는 데 사용됩니다. 이를 통해 웹 페이지에서 다양한 애니메이션 효과를 쉽게 추가할 수 있습니다. .animate() 메서드의 사용법과 몇 가지 예제를 살펴보겠습니다.

예제 1: 요소의 이동 애니메이션

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .animate() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
    }
  </style>
</head>
<body>

<div id="box"></div>

<script>
  $(document).ready(function() {
    $("#box").click(function() {
      $(this).animate({ left: '+=100px' }, 1000);
    });
  });
</script>

</body>
</html>

위 코드에서는 id가 "box"인 요소를 클릭할 때마다 오른쪽으로 100px 이동하는 애니메이션을 보여줍니다.

예제 2: 요소의 크기 변경 애니메이션

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .animate() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>

<div id="box"></div>

<script>
  $(document).ready(function() {
    $("#box").click(function() {
      $(this).animate({ width: '+=50px', height: '+=50px' }, 1000);
    });
  });
</script>

</body>
</html>

위 코드에서는 id가 "box"인 요소를 클릭할 때마다 가로와 세로 크기가 각각 50px씩 증가하는 애니메이션을 보여줍니다.

예제 3: 요소의 투명도 변경 애니메이션

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .animate() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: green;
    }
  </style>
</head>
<body>

<div id="box"></div>

<script>
  $(document).ready(function() {
    $("#box").click(function() {
      $(this).animate({ opacity: 0.5 }, 1000);
    });
  });
</script>

</body>
</html>

위 코드에서는 id가 "box"인 요소를 클릭할 때마다 투명도가 절반으로 줄어드는 애니메이션을 보여줍니다.

.animate() 메서드를 사용하면 CSS 속성의 값을 부드럽게 변경할 수 있습니다. 첫 번째 인자로는 변경할 CSS 속성과 값을 포함한 객체를 전달하고, 두 번째 인자로는 애니메이션의 지속 시간을 밀리초 단위로 전달합니다.

위 예제에서는 클릭이벤트를 통해 요소의 스타일 속성을 변경하여 애니메이션을 효과적으로 보여줍니다.

저작자표시 비영리 변경금지 (새창열림)

'프로그래밍' 카테고리의 다른 글

jQuery .fadeIn() 메서드의 활용 예제와 설명  (0) 2024.04.01
jQuery .delay() 메서드의 활용 예제와 설명  (0) 2024.04.01
jQuery Deferred.then() 메서드의 활용 예제와 설명  (0) 2024.04.01
jQuery Deferred.resolveWith() 메서드의 활용 예제와 설명  (0) 2024.04.01
jQuery Deferred.resolve() 메서드의 활용 예제와 설명  (0) 2024.04.01
'프로그래밍' Related Articles more