애니메이션 큐에 대해서 알아봅시다. jquery 효과는 먼저 실행된 순서대로 실행하게됩니다.
다음 소스를 보고 어떤 애니메이션부터 실행될지 예상해봅시다.
소스코드
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 50px; height: 50px;
background-color: orange;
position: relative;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
//클릭시 animate 메소드를 체이닝으로 연결했습니다.
//큐에 들어가서 차례로 실행이 됩니다.
$('div').click(function(){
$(this).animate({
left: '+=60'
}, 2000).animate({
width: '+=60'
}, 2000).animate({
height: '+=60'
}, 2000);
});
});
</script>
</head>
<body>
<div></div>
</body>
</html>
출력화면
마우스로 네모를 클릭하면
이동 -> 가로길이 늘어나기 -> 세로길이 늘어나기 순으로 실행됩니다.
다음은 clearQueue 메소드를 이용해서 큐에 들어간 효과를 삭제하는 방법입니다.
소스코드
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 50px; height: 50px;
background-color: orange;
position: relative;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
//animate 메소드를 사용합니다.
$('div').animate({left: '+=60'}, 2000);
$('div').animate({width: '+=60'}, 2000);
$('div').animate({height: '+=60'}, 2000);
//3초뒤에 애니메이션 큐를 제거합니다.
setTimeout(function(){
//애니메이션 큐를 제거합니다.
$('div').clearQueue();
//효과 메소드를 사용합니다.
$('div').hide();
}, 3000);
});
</script>
</head>
<body>
<div></div>
</body>
</html>
출처 : 모던웹을 위한 javascript jquery 입문
실행 결과
움직이다가
없어 집니다.
'프로그래밍 > Jquery' 카테고리의 다른 글
| jquery - 슬라이더 효과를 사용한 이미지 전환 방법 (이미지슬라이더) (0) | 2014.12.21 |
|---|---|
| jquery - Jquery UI Effect 플러그인 사용법 (0) | 2014.11.02 |
| jquery - delay 메소드를 이용한 애니메이션 지연 방법 (0) | 2014.11.02 |
| jquery - stop 메소드를 이용한 애니메이션 정지하기 (0) | 2014.10.27 |
| jquery - animate 메소드를 이용한 동적으로 스타일 변화시키기 (0) | 2014.10.27 |
| jquery - hover 메소드와 animate 메소드를 이용한 마우스 오버 애니메이션 효과 만들기 (0) | 2014.10.27 |
| jquery - innerfade 플러그인을 이용한 사진 변경 효과 적용하기 (0) | 2014.10.27 |
| jquery - toggle 메소드를 이용한 시각효과 만들기 (0) | 2014.10.20 |