jQuery 간단한 애니메이션 만들기

🎞️ 간단한 애니메이션 만들기

jQuery는 요소를 부드럽게 움직이거나 투명도를 조절하는 등의 애니메이션 효과를 아주 쉽게 구현할 수 있도록 도와줍니다.
CSS만으로 하기 어려운 동적 효과도 간단한 코드 몇 줄로 구현이 가능합니다.

📌 대표 애니메이션 메서드

• fadeIn() / fadeOut() / fadeToggle() : 투명도 기반 애니메이션
• slideDown() / slideUp() / slideToggle() : 세로 슬라이드 애니메이션
• animate() : CSS 속성을 직접 지정해 사용자 정의 애니메이션 구현

✨ 예제 1: 페이드 효과

<button id="fadeBtn">박스 보이기/숨기기</button>
<div id="fadeBox" style="width:200px;height:100px;background:#3498db;display:none;margin-top:10px;"></div>

<script>
  $('#fadeBtn').click(function() {
    $('#fadeBox').fadeToggle(500);
  });
</script>
  

버튼을 클릭하면 fadeToggle()이 호출되어 박스가 서서히 나타나거나 사라집니다.

📐 예제 2: 슬라이드 애니메이션

<button id="slideBtn">내용 펼치기/접기</button>
<div id="slideBox" style="display:none; background:#1abc9c; padding:10px; margin-top:10px;">
  슬라이드로 나타나는 콘텐츠입니다.
</div>

<script>
  $('#slideBtn').click(function() {
    $('#slideBox').slideToggle(400);
  });
</script>
  

slideToggle()은 요소의 세로 크기를 조절해 접거나 펼치는 효과를 줍니다.

🛠️ 예제 3: animate()로 사용자 정의 애니메이션

<button id="moveBtn">박스 이동하기</button>
<div id="moveBox" style="width:100px; height:100px; background:#e74c3c; position:relative; margin-top:10px;"></div>

<script>
  $('#moveBtn').click(function() {
    $('#moveBox').animate({
      left: '250px',
      opacity: 0.5,
      height: '150px',
      width: '150px'
    }, 1000);
  });
</script>
  

animate()는 left, top, opacity, height, width 등 CSS 속성을 지정하여 원하는 애니메이션을 만들 수 있습니다. 위치 변경, 크기 조절, 투명도 변경 등이 가능합니다.

💡 Tip

• 애니메이션 속도는 밀리초 단위 (ex. 500, 1000) 또는 문자열 ('slow', 'fast') 사용
• 동시에 여러 애니메이션 적용 가능
• 연속 애니메이션은 .queue(), .delay() 등을 활용

📌 마무리

jQuery 애니메이션은 인터랙티브 하고 생동감 있는 UI를 만들 때 매우 유용합니다. 간단한 버튼 클릭 효과, 알림 창, 토글 메뉴 등 다양한 곳에 활용해 보세요.