jQuery의 animate()와 stop()

 

 

jQuery의 animate()와 stop() 메서드 설명 및 예제

animate() 메서드

animate() 메서드는 jQuery에서 가장 강력하고 유연한 애니메이션 메서드 중 하나입니다. 이 메서드를 사용하여 CSS 속성을 부드럽게 변경하여 다양한 애니메이션 효과를 만들 수 있습니다.

기본 구조:

JavaScript

$(selector).animate({ properties }, duration, easing, complete );

코드를 사용할 때는 주의가 필요합니다.

 

• selector: 애니메이션을 적용할 요소를 선택합니다.
• properties: 변경할 CSS 속성과 값을 객체 형태로 지정합니다.
• duration: 애니메이션이 완료되는 데 걸리는 시간(밀리초)입니다.
• easing: 애니메이션의 진행 속도를 조절하는 이징 함수입니다.
• complete: 애니메이션이 완료된 후 실행할 함수입니다.

예제:

HTML

<div id="myDiv">애니메이션 요소</div>
<button id="animateButton">애니메이션 시작</button>

<script>
$(document).ready(function() {
  $("#animateButton").click(function() {
    $("#myDiv").animate({
      left: "250px",
      opacity: 0.5,
      fontSize: "2em"
    }, 1500, function() {
      alert("애니메이션 완료!");
    });
  });
});
</script>

코드를 사용할 때는 주의가 필요합니다.

 

위 예제에서는 버튼을 클릭하면 myDiv 요소가 왼쪽으로 250픽셀 이동하고, 불투명도가 0.5로 변경되며, 글자 크기가 2배로 커지는 애니메이션이 1.5초 동안 실행됩니다. 애니메이션이 완료되면 경고창이 나타납니다.

stop() 메서드

stop() 메서드는 현재 진행 중인 애니메이션을 중지하는 데 사용됩니다.

기본 구조:

JavaScript

$(selector).stop();

코드를 사용할 때는 주의가 필요합니다.

 

• selector: 애니메이션을 중지할 요소를 선택합니다.

예제:

HTML

<div id="myDiv" style="position: absolute; left: 0px;"></div>
<button id="startButton">애니메이션 시작</button>
<button id="stopButton">애니메이션 중지</button>

<script>
$(document).ready(function() {
  $("#startButton").click(function() {
    $("#myDiv").animate({ left: "200px" }, 1000);
  });
  $("#stopButton").click(function() {
    $("#myDiv").stop();
  });
});
</script>

코드를 사용할 때는 주의가 필요합니다.

 

위 예제에서는 startButton을 클릭하면 myDiv 요소가 오른쪽으로 이동하는 애니메이션이 시작됩니다. stopButton을 클릭하면 현재 진행 중인 애니메이션이 중지됩니다.

animate()와 stop() 메서드 활용 예시

• 슬라이드쇼: 이미지를 순차적으로 슬라이드하며 보여주는 효과
• 메뉴 애니메이션: 메뉴를 열고 닫을 때 부드러운 효과
• 폼 유효성 검사: 입력값이 잘못되었을 때 해당 입력 필드를 강조하는 효과
• 로딩 화면: 로딩 중임을 시각적으로 표현하는 효과

추가 설명

• easing: linear, swing, easeIn, easeOut, easeInOut 등 다양한 이징 함수를 사용하여 애니메이션의 진행 속도를 조절할 수 있습니다.
• queue: 애니메이션이 순서대로 실행되도록 큐에 추가됩니다. stop(true, true)를 사용하면 큐에 있는 모든 애니메이션을 중지하고 클릭 이벤트를 제거할 수 있습니다.
• custom easing: jQuery UI에서 제공하는 커스텀 이징 함수를 사용하여 더욱 다양한 효과를 만들 수 있습니다.

주의:

• animate() 메서드를 사용할 때는 요소의 위치를 상대적인 값으로 지정해야 합니다.
• stop() 메서드는 현재 진행 중인 애니메이션만 중지하며, 큐에 남아 있는 애니메이션은 실행되지 않습니다.

animate()와 stop() 메서드를 효과적으로 활용하여 웹 페이지에 생동감을 더하고 사용자 경험을 향상시킬 수 있습니다.