[jQuery] 애니메이션 제어 메서드

# 형식

$("요소")
    .[delay(지연시간ms)].animate({ 스타일1 : "속성값1" }, 진행시간, ["가속도"])  // 1번째
    .[delay(지연시간ms)].animate({ 스타일2 : "속성값2" }, 진행시간, ["가속도"])  // 2번째
    ...
    .[delay(지연시간ms)].animate({ 스타일n : "속성값n" }, 진행시간, ["가속도"])  // n번째

 

---

#  큐(대기열)에 적용된 애니메이션 함수 반환

// queue() 메서드 이후에 있는 animate 메서드들은 실행되지 않음
$("요소").queue();

#  queue 메서드 취소

$("요소").dequeue();

#  첫 애니메이션만 실행하고 나머지 취소

$("요소").clearQueue();

#  애니메이션이 지정되어 있던 요소의 애니메이션 취소

$("요소").stop();

#  애니메이션 없이 순간 이동

$("요소").stop(true, true);

 

---

#  애니메이션 중에는 이벤트가 발생해도 효과가 누적되지 않도록 함

$("요소").on("이벤트", function() {
	// 요소가 애니메이션 중이 아닐 때에만 아래 코드 실행
	if (! $(this).is(":animated")) {
		$(this).animate( ... );
	}
});

#  예시 : 누를 때마다 1초 동안 오른쪽으로 50px씩 이동

$("요소").on("click", function(){
    if (! $(this).is(":animated")) { 
        $(this).animate({ marginLeft : "+=50px"}, 1000)
    }
});