제이쿼리를 통해 애니메이션을 주다보면 이벤트 발생되는 것에 따라 애니메이션이 누적되어 사용자는 다른 작업을 하고 싶은데 누적된 애니메이션을 확인하고 있어야하는 상황이 발생하기도 한다.
이러한 것을 알기 위해서는 애니메이션 큐에 대해서 알고 있어야 한다.
참고로 큐는 순차적으로 이벤트가 누적되어 누적된 순서대로 처리가 되는 자료구조이다.
[Java/Java Basic] - 자료구조, Stack 스택과 큐 Queue
자료구조, Stack 스택과 큐 Queue
프로그램 개발할 때 가장 많이 사용하는 자료 구조인 스택과 큐 스택은 상자를 쌓아 올리는 형태의 구조이고, 큐는 일상 생활에서 많이 사용하는 방식의 자료 구조 '선착순' 정보처리기사 필기에도 자주 기출문제..
developsd.tistory.com
애니메이션 큐
jQuery의 효과 메서드는 계속 누적됨 / 누적된 효과 명령은 큐(Queue)에 누적됨
큐는 먼저 들어간 것이 먼저 나오는 공간( 효과 메서드를 사용하면 명령이 차례차례 큐에 들어가고 들어간 순서대로 실행 된다.
- clearQueue( ) : 큐의 내용을 제거
- 큐의 내용이 삭제 되지만, 바로 정지하는 기능은 아님
- stop( ) : 효과와 애니메이션을 정지
- clearQueue , goToEnd는 블리언을 입력 / 미 입력 시 자동으로 false
- $(선택자).stop( );
- $(선택자).stop(clearQueue );
- $(선택자).stop(clearQueue , goToEnd );
애니메이션 지연
-
delay( ) 큐에 있는 명령을 잠시 중지
애니메이션 큐 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color: pink;
margin: 5px;
position:relative;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(function() {
$("div").animate( {left:500},2000 );
$("div").animate( {left:0},2000 );
$("button").click(function() {
var html = $(this).html();
var evalText = "$('div')."+html;
eval(evalText);
});
});
</script>
</head>
<body>
<div></div>
<hr>
<button>stop()</button>
<button>stop(true)</button>
<button>stop(false,true)</button>
<button>stop(true,true)</button>
</body>
</html>(결과값)
반응형
'Java Script > jQuery' 카테고리의 다른 글
| jQuery 예제, 체크박스 모두 선택 (0) | 2019.05.14 |
|---|---|
| 제이쿼리로 이미지 슬라이더 구현 (0) | 2019.05.14 |
| jQuery 이벤트 메소드 (0) | 2019.05.14 |
| jQuery, 특정 태그 선택 후 값 처리 (0) | 2019.05.14 |
| jQuery, 제이쿼리 기본 메소드 총정리 (0) | 2019.05.14 |
댓글