©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: 50px;
			height: 50px;
			background-color: green;
			margin-top: 20px;
		}
	</style>
	<script>
		$(function() {
			$("#divBox").mouseenter( function() {
				$(this).stop().animate({
					width: "300px"		// CSS width 속성값을 "300px"로 설정함.
				}, 1000, "linear");		// 시간당 속도 함수를 "linear"으로 설정함.
			});
			$("#divBox").mouseleave( function() {
				$(this).stop().animate({
					width: "50px"		// CSS width 속성값을 "50px"로 설정함.
				}, 1000, "swing");		// 시간당 속도 함수를 "swing"으로 설정함.
			});
		});
	</script>
</head>

<body>

	<h1>.animate() 메소드 - 시간당 속도 함수</h1>
	<div id="divBox"></div>
	
</body>

</html>