jQuery : Animation(애니메이션) 2
2023. 3. 16. 09:18ㆍjavascript/jQuery
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery - Animation</title>
<link rel="stylesheet" href="../../css/reset.css">
<link rel="stylesheet" href="../../css/dark.css">
<!-- jQuery CDN-->
<style>
</style>
<script>
$(function() {
// 시각 효과 관련 메서드들은 연속해서 호출하면
// 동시에 수행되는 것이 하니라 호출된 순서대로 하나씩 수행된다.
// → 시각 효과 관련 메서드를 호출하면 애니메이션 큐에 저장된다.
// → 애니메이션 큐에 저장된 효과들을 하나씩 꺼낸 다음 수행
// 애니메이션 효과를 제어하기 위한 메서드
// - clearQueue() : 큐에 대기 중인 효과를 제거
// - delay() : 지연/대기 시간
// - stop() : 현재 실행 중인 효과를 정지
// - finish() : 큐에 저장된 효과의 최종 형태로 변화
// - queue() : 애니메이션 큐에 사용자 정의 함수를 추가
// - dequeue() : queue() 메서드로 추가된 함수를 제거
var $box = $("#box");
$box
.animate({width:"30%"}, 2000)
.animate({height:200}, 2000)
.delay(1000) // 지연 시간
.queue(function() {
$box.css({
backgroundColor:"yellowgreen",
transitionDuration:"2000ms"
});
window.setTimeout(function() {
$box.dequeue();
}, 2000);
})
.animate({
marginTop:200,
marginLeft:200
}, 2000)
.on("click", function() {
// clearQueue()
// - 큐에 대기 중인 효과를 제거
// - 현재 실행 중인 효과는 제거/정지 되지 않고 수핸된다.
// $box.clearQueue();
// stop([clearQueue[, goToEnd]])
// - clearQueue : 큐에 대기 중인 효과에 대한 제거 여부
// : 기본 값 = false
// - goToEnd : 실행 중인 효과의 최종 형태로 변화 여부
// : 기본 값 = false
// $box.stop(); // = .stop(false, false)
// → 큐에 대기 중인 효과를 제거하지 않는다.
// → 호출된 시점에서 실행 중인 효과를 멈춘다.
// → 현재 실행 중인 효과를 멈추고 다음 효과를 수행한다.
// $box.stop(true); // = .stop(true, false)
// - 큐에 대기 중인 효과를 제거한다.
// → 호출된 시점에서 실행 중인 효과를 멈춘다.
// → 애니메이션 효과를 완전히 멈춘다.
// $box.stop(false, true);
// - 큐에 대기 중인 효과를 제거하지 않는다.
// - 실행 중인 효과의 최종 형태로 변화한다.
// → 현재 실행 중인 효과의 최종 형태로 변화시키고 다음 효과를 수행
// $box.stop(true, true);
// - 큐에 대기 중인 효과를 제거하지 않는다.
// - 실행 중인 효과의 최종 형태로 변화한다.
// → 현재 실행 중인 효과의 최종 형태로 변화시키고 완전히 멈춘다.
// $box.finish();
// → 모든 효과를 최종 형태로 변화시킨다.
// $box.dequeue();
// → queue() 메서드에 의해 추가되어 실행된 함수를 제거하고
// 다음 효과가 진행하도록 한다.
});
});
</script>
</head>
<body>
<div id="box" class="gray-box"></div>
</body>
</html>
'javascript > jQuery' 카테고리의 다른 글
| jQuery : Scroll(scroll 이벤트) (0) | 2023.03.16 |
|---|---|
| jQuery : Wheel(wheel 이벤트) (0) | 2023.03.16 |
| jQuery : Animate(animate() 메서드) (0) | 2023.03.16 |
| jQuery : Animation(애니메이션) 1 (0) | 2023.03.16 |
| jQuery : each(each()메서드) (0) | 2023.03.16 |