효과 및 애니메이션 메서드

효과 메서드

효과 Effect 메서드에는 선택한 요소를 역동적으로 숨겼다가 보이게 만드는 기능을 가진 메서드가 있습니다

1. 숨김
   hide() - 요소를 숨깁니다.
   fadeOut() - 요소가 점점 투명해지면서 사라집니다.
   slideUp() - 요소가 위로 접히며 숨겨집니다.

2. 노출
   show() - 숨겨진 요소가 노출됩니다.
   fadeIn() - 숨겨진 요소가 점점 선명해집니다.
   slideDown - 숨겨진 요소가 아래로 펼쳐집니다.

3. 노출, 숨김
   toggle() - hide(), show() 효과를 적용합니다.
   fadeToggle() - fadeIn(), fadeOut() 효과를 적용합니다.
   slideToggle() - slideUp(), slideDown() 효과를 적용합니다.
   fadeTo() - 지정한 투명도를 적용합니다.

효과 메서드의 기본형

<script>
$("요소 선택").효과메서드(효과 소요 시간, 가속도, 콜백함수)
</script>

• 효과 소요 시간은 요소를 숨기거나 노출할 때 소요되는 시간입니다.
  작성법 1: "slow" "normal" "fast"
  작성법 2: 1000(1초) 500(0.5초)

• 가속도는 숨기거나 노출하는 동안의 가속도를 설정합니다.
  작성법 1: "swing" 시작과 끝은 느리게, 중간은 빠른 속도(기본값) .
  작성법 2: "linear" 일정한 속도로 움직입니다.

• 콜백 함수는 노출과 숨김 효과가 끝난 후에 실행할 함수입니다.(생략 가능)

<script>
$("#box").slideUp(2000, "linear", function(){
	alert("hello");
}) 
// id box 요소를 2초간 위로 올려 숨깁니다. 가속도는 linear, 요소가 숨겨지면 알림 창이 뜹니다.
</script>

fadeTo() 메서드

투명도는 0 ~ 1 까지의 값을 입력할 수 있습니다. 1이 최대 선명도 입니다.

<script>
$("요소 선택").fadeTo(효과 소요 시간, 투명도, 콜백 함수);
</script>

---

animate() 메서드

애니메이트 메서드는 선택한 요소에 다양한 동작 Motion 효과를 적용할 수 있습니다.
(앞으로 이동시키거나 점차 커지게 하는 등)

<script>
$("요소 선택").animate({스타일 속성}, 적용 시간, 가속도, 콜백 함수)
</script>

• 스타일 속성은 애니메이션으로 적용할 속성
• 적용 시간은 동작에 반응하는 데 소요되는 시간

예시) 버튼 1을 클릭하면 class 값이 txt1인 요소가 2초동안 오른쪽 방향으로 500px 만큼 이동하고, 글자의 크기가 30px 커집니다. 애니메이션이 완료되면 알림 창이 뜹니다.

<script>
$("#btn1").on("click", function() {
	$("txt1").animate({
    marginLeft: "500px",
    fontSize: "30px"
	}, 2000, "linear", function() {
    alert("모션 완료")
    });
</script>

---

애니메이션 효과 제어 메서드

효과, 또는 애니메이션이 적용된 요소의 동작을 제어하는 메서드 입니다.
(오랜만에 에펙이 생각나네요)

종류는 크게

종류	설명
stop()	현재 실행 중인 효과를 모두 정지시킵니다.
delay()	지정한 시간만큼 지연했다가 애니메이션을 진행합니다.
finish()	선택한 요소의 진행 중인 애니메이션을 강제로 완료 시점으로 보낸 후 종료합니다.

stop(), finish()

<script>
1. $("요소 선택").stop();
2. $("요소 선택").stop(clearQueue, finish);
</script>

1. 진행중(inprogress)인 첫 번째 애니메이션만 정지시킵니다. 큐에 대기중인 애니메이션은 계속해서 실행합니다.
2. clearQueue, finish는 true나 false의 값을 입력할 수 있습니다(기본값은 false).
   clear Queue가 true면 큐에서 대기 중인 애니메이션을 모두 제거합니다.
   finish가 true면 진행 중인 애니메이션을 강제로 종료합니다.
   예시)

<script>
$("txt1").animate({marginLeft: "500px"}, 2000)
.animate({opacity: 0.5}, 1000);

$("txt1").stop();
// 진행 중인 애니메이션만 정지
</script>

<script>
$("txt1").animate({marginLeft: "500px"}, 2000)
.animate({opacity: 0.5}, 1000);

$("txt1").stop(true, true);
/** 큐에 대기 중인 애니메이션을 제거하고, 진행 중인 애니메이션은 강제로 종료. 
바로 종료 시점으로 이동하는데, 애니메이션 없이 css를 적용한 것처럼 500px씩 띡띡 끊겨 이동합니다. **/
</script>

delay()

<script>
$("요소 선택").delay(지연 시간).애니메이션 효과 메서드();

$("txt1").delay(3000)animate({marginLeft: "500px"}, 1000);
// 3초 후에 애니메이션이 실행됩니다.
</script>