©TCP-tryWWW

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>jQuery Effect Handling</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<style>
		#divBox {
			width: 100px;
			height: 100px;
			background-color: yellow;
			border: 5px solid red;
			margin-top: 20px;
		}
	</style>
	<script>
		$(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();
			});
		});
	</script>
</head>

<body>

	<h1>이펙트 효과의 정지와 중지</h1>
	<p></p>
	<button id="toggleBtn">이펙트 효과 시작!</button>
	<button id="stopBtn">이펙트 효과 정지!</button>
	<button id="finishBtn">이펙트 효과 중지!</button>
	<div id="divBox"></div>
	
</body>

</html>