jQuery - animate(애니메이트) 메서드 사용법, 실행 후 다른 코드 실행(callback)

2022. 5. 18. 15:23

▶ animate 메서드

💻 예제 설명

animate 란 단어는 동사적인 표현으로는 "생기 있게 하다", "활기 띠게 하다", "~을 움직이다", "~에 움직임을 주다"

등등 이러한 의미를 담고 있다.

이처럼 jQuery에서의 animate 메서드는 순수히 단어 의미와 동일하다.

즉, animate 메서드는 요소를 움직이게 하거나, 또는 변화를 주거나, 등등

사용자 마음대로 요소를 컨트롤할 수가 있다.

이 animate 메서드를 사용하는 2가지 방법에 대해 알아보자.

첫 번째 일반적인 animate 메서드 사용법

두 번째 animate 메서드의 행위가 끝나고 무언가 다음 코드를 실행하기 위해 callback 함수를 실행하는 방법

일반적으로 2가지 방법이 간단하게 빈번히 사용을 많이 하는 방법이고,

이 외에 난 좀더 세밀하게 요소를 컨트롤을 하고 싶다거나 하면 속성 옵션을 사용하면 가능하다.

아래 링크 참조

속성옵션 사용법 보러 가기 ☜

Syntax

메서드	Syntax
animate()	$('선택요소').animate({프로퍼티:값});
animate()	$('선택요소').animate({프로퍼티:값}, speed, callback);

🖥 소스 예제

1 - 1) 일반적인 사용법

// 일반적인 사용법 Syntax
 $('선택요소').animate({프로퍼티 : 값});
 
 // 사용예시
 $('선택요소').animate({left: '250px', opacity:'0.5'});

1 - 2) 예제

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#btn").click(function(){
      $('#panel').animate({left:'250px', opacity:'0.5'});
  });
});
</script>
<style> 
#panel, #btn {
  padding: 5px;
  text-align: center;
  background-color: #5a960b;
  border: solid 1px #c3c3c3;
  color:#ffffff;
}

#panel {
  padding: 50px;
  width:100px;
  position:absolute;
}
</style>
</head>
<body>

  <button id="btn">animate 실행 버튼</button>
  <hr>
  <div id="panel">콘텐츠</div>
</body>
</html>

2 - 1) callback 사용법

// 일반적인 사용법 Syntax
/*
    {프로퍼티 : 값} // animate 행위 지정
    속도 // 'slow', 'fast', 밀리세컨즈(1000 = 1초)
    callback // animate 행위가 끝나고 callback 함수를 호출
*/
 $('선택요소').animate({프로퍼티 : 값}, 속도, callback);
 
 // 사용예시
 $('선택요소').animate({left: '250px', opacity:'0.5'}, 3000, ,function(){
 	alert('애니메이트 행위가 끝나면 이 알럿창이 호출됩니다.');
 });

2 - 2) 예제

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#btn").click(function(){
      $('#panel').animate({left:'250px', opacity:'0.5'}, 3000, function(){
        alert('애니메이트 행위가 끝나면 이 알럿창이 호출됩니다.');
      });
  });
});
</script>
<style> 
#panel, #btn {
  padding: 5px;
  text-align: center;
  background-color: #5a960b;
  border: solid 1px #c3c3c3;
  color:#ffffff;
}

#panel {
  padding: 50px;
  width:100px;
  position:absolute;
}
</style>
</head>
<body>

  <button id="btn">animate 실행 버튼</button>
  <hr>
  <div id="panel">콘텐츠</div>
</body>
</html>

💻 예제 구동 설명

1 - 2) 예제 ☜

녹색 박스(div) 요소가 예제 소스에 정의된

animate({left: '250px', opacity:'0.5'});

왼쪽지점으로부터 250px 이동
불투명 수치 0.5 적용

이렇게 적용이 되어 결과 화면 이미지를 보면 250px이 이동이 되었고,

녹색에서 좀 더 투명해진 녹색 박스로 적용되었다.

이처럼 animate 메서드는 요소를 개발자 마음대로 이동시키거나 변화시거나 혹은 모양도 다르게 색도 다르게

개발자 마음대로 변형을 시킬 수가 있는 메서드이다.

2 - 2) 예제 ☜

이 예제는 animate 행위가 다 끝나면 callback 함수를 호출하는 예제로

이것처럼 요소가 animate라는 행위가 끝나면 즉, 위 예제로 설명하자면

왼쪽 지점으로부터 250px 이동되었고,

불투명 수치가 0.5로 적용이 되었고,

이 모든 행위 animate 메서드의 행위가 완료가 되었으면

위 이미지에서 빨간색 동그라미 박스(callback 함수)를호출을 한다.

그러므로 결과 화면을 보면 모든 행위가 다 끝나고, alert 호출을 할 수 있는 것을 확인할 수가 있다.

저작자표시 비영리 변경금지

'web 언어 > jQuery' 카테고리의 다른 글

jQuery - animate(애니메이트) 메서드로 모션 만들기 (queue 메서드 사용), 큐 사용 (0)	2022.05.19
jQuery - effect(효과) 속성(옵션- option) 제어하기 [show / hide / fadeIn / fadeOut / slideUp / slideDown] (0)	2022.05.17
jQuery - slideToggle(슬라이드토글) 메서드, 실행 후 다른 코드 실행(callback) (0)	2022.05.16
jQuery - slideUp(슬라이드업) 메서드, 실행 후 다른 코드 실행(callback) (0)	2022.05.16
jQuery - slideDown(슬라이드다운) 메서드, 실행 후 다른 코드 실행(callback) (0)	2022.05.16

열공의 기록