©TCP-tryWWW

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

<head>
	<meta charset="UTF-8">
	<title>jQuery Custom Effect</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<style>
		#divBox {
			width: 100px;
			height: 100px;
			position: absolute;
			background-color: yellow;
			border: 5px solid red;
			margin-top: 20px;
		}
	</style>
	<script>
		$(function() {
			$("#animateBtn").on("click", function() {
				$("#divBox").animate(		// id가 "divBox"인 요소를
					{
						left: "+=100",		// 오른쪽으로 100픽셀 이동하고,
						opacity: 0.2		// 투명도를 0.2로 변경함.
					}, 500, function() {	// 0.5초에 걸쳐서 이펙트 효과가 진행됨.
						$("#text").html("사용자 정의 이펙트가 실행됐어요!");
					}
				);
			});
		});
	</script>
</head>

<body>

	<h1>.animate() 메소드</h1>
	<button id="animateBtn">이펙트 효과 시작!</button>
	<p id="text">이펙트 효과가 모두 끝나면 이 텍스트는 변경될 거에요!</p>
	<div id="divBox"></div>
	
</body>

</html>