이번 글에서는 이펙트 효과를 지연시키거나, 정지시키거나, 끝내는 방법에 대하여 알아보려고 합니다.
이러한 방법을 해결해주는 메소드로는 delay(), stop(), finish()가 있습니다.
각각의 메소드에 대하여 알아보도록 합시다.
delay() 메소드
이펙트 효과 사이의 지연 시간을 설정하여 효과를 지연시키는 메소드입니다.
예제를 통하여 확인해보도록 하겠습니다.
아래 소스는 fadeOut() 효과와 fadeIn() 효과 사이에 1초의 지연시간을 설정하는 예제입니다.
<style>
#divBox {
width: 100px;
height: 100px;
background-color: yellow;
border: 5px solid red;
margin-top: 20px;
}
</style>
<script>
$(function() {
$("#startBtn").on("click", function() {
$("#divBox").fadeOut(500).delay(1000).fadeIn(1000);
})
})
</script>
<h1>이펙트 효과의 지연 설정</h1>
<button id="startBtn">이펙트 효과 시작!</button>
<div id="divBox"></div>
</body>
이번에는 이펙트 효과를 중지시키는 방법과 종료하는 방법에 대한 메소드들에 대하여 알아보겠습니다.
stop() 메소드 - 선택한 요소에서 실행 중인 모든 이펙트 효과를 중지시킵니다.
finish() 메소드 - 선택한 요소가에서 실행중인 모든 이펙트 효과를 전부 종료시킵니다.
아래 예제처럼 메소드를 사용해주시면 됩니다.
<body>
<style>
#divBox {
width: 100px;
height: 100px;
background-color: yellow;
border: 5px solid red;
margin-top: 20px;
}
</style>
<script>
$(function() {
$("#toggleBtn").on("click", function() {
$("#divBox").slideToggle(2000);
})
$("#stopBtn").on("click", function() {
$("#divBox").stop();
})
$("#finishBtn").on("click", function() {
$("#divBox").finish();
})
})
</script>
<h1>이펙트 효과의 정지와 중지</h1>
<p></p>
<button id="toggleBtn">이펙트 효과 시작!</button>
<button id="stopBtn">이펙트 효과 정지!</button>
<button id="finishBtn">이펙트 효과 중지!</button>
<div id="divBox"></div>
</body>
'1. 웹개발 > 1_1_2 Jquery' 카테고리의 다른 글
| [Jquery] $.each() - 요소 각각에 대하여 함수 실행 (4) | 2020.04.19 |
|---|---|
| [Jquery] animate() - 애니메이션 효과 만드는 방법 (0) | 2020.04.19 |
| [Jquery] slideUp(), slideDown() - 슬라이드 효과 내는 방법 (0) | 2020.04.18 |
| [Jquery] fadeIn(), fadeOut() - 페이드 효과 내는 방법 (0) | 2020.04.12 |
| [Jquery] serialize() - 직렬화 방법 (0) | 2020.04.12 |
