제이쿼리 이펙트 효과제어

이펙트 효과의 제어와 관련된 메소드

 

메소드	설명
.delay()	실행 중인 큐 안에서 연속적으로 실행되는 이펙트 효과 사이의 지연 시간을 설정함.
.stop()	선택한 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지시킴
.finish()	선택한 요소에 실행 중인 모든 이펙트 효과를 중지시키고, 선택한 요소가 포함된 큐까지 제거하여 모든 이펙트 효과를 전부 종료시킴.

 

.delay()

$(function() {
			$("#startBtn").on("click", function() {
				// id가 "divBox"인 요소를 0.5초에 걸쳐 사라지게 하고
				// 5초의 지연시간 뒤에 다시 2초에 걸쳐 나타나게 함.
				$("#divBox").fadeOut(500).delay(5000).fadeIn(2000);
			});
		});

0.5초에 걸쳐 서서히 사라지다가, 5초의 지연시간 이후

2초에 걸쳐 서서히 나타남.

 

 

 

.stop()과 .finish()

$(function() {
	$("#toggleBtn").on("click", function() {
		// id가 "divBox"인 요소를 2초에 걸쳐 올라가면서 사라지거나 내려오면서 나타나게 함.
		$("#divBox").slideToggle(2000);
	});
	$("#stopBtn").on("click", function() {
		// id가 "divBox"인 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지시킴.
		$("#divBox").stop();
	});
	$("#finishBtn").on("click", function() {
		// id가 "divBox"인 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지시키고, 그 큐까지 모두 제거함.
		$("#divBox").finish();
	});
});

 

.slideToggle()을 이용해서 알아보는 코드이다.

 

.slideToggle()실행 도중 .stop()을 하게 되면 이펙트효과가 실행되는 도중 즉시 중지된다.

 

.finish()같은 경우는 실행 도중 발생되면

이펙트가 즉시 중지되서 서서히 보이고 사라지는 fade같은 이펙트가 있다면

그 서서히 사라지는 이펙트가 바로 중지되면서 결과값만 나오게 되는 모습을 볼 수 있다.