jquery effect 효과에 대해 알아보겠다.
- delay()
- stop()
- finish()
예제 )
<body>
<h1>이펙트 효과의 지연 설정</h1>
<button id="startBtn">이펙트효과시작</button>
<div id="divBox"></div>
<h1>이펙트 효과의 정지와 중지</h1>
<p></p>
<button id="toggle_btn">slideToggle</button>
<button id="stop_btn">stop()</button>
<button id="finish_btn">finish()</button>
<div id="divBox2"></div>
</body>
<script>
$(document).ready( function(){
$('#startBtn').click( function(){
//divBox를 0.5초에 걸쳐 사라지게 하고
//1초 딜레이 후에 다시 2초동안 나타남
$('#divBox').fadeOut(500).delay(1000).fadeIn(2000);
});
$("#toggle_btn").click( function(){
$('#divBox2').slideToggle(2000);
});
$("#stop_btn").click( function(){
$('#divBox2').stop();
});
$('#finish_btn').click( function(){
$('#divBox2').finish();
});
});
</script>delay()
effect 효과의 지연설정
delay() 메소드는 실행 중인 큐 안에서 연속적으로 실행되는 이벤트 효과 사이의
시간을 설정한다.
일정시간이 경과한 후에 함수 뒤의 코드를 실행하도록 강제적인 지연시간을 생성하는ㄴ데,
큐를 가진 애니메이션에만 적용된다.
stop()
effect 효과의 중지
.stop() 메소드는 선택한 요소에서 실행 중인 모든 이펙트 효과를 중지시킨다.
finish()
.finish() 메소드는 선택한 요소가 포함된 큐까지 제거하여 모든 이펙트 효과를 전부 종료시킨다.
.stop()메소드와 .finish() 메소드는 실행 중인 이펙트 효과를 멈춘다는 점이 동일하지만,
.stop()메소드는 일시적으로 중지시키고 다시 재개도 가능하지만, .finish() 메소드는 중지가 아닌 아예 종료시키며 다시 재개할 수 없고 처음부터 실행을 해야한다는 점이 차이점이다.
Web publisher