[jQuery] animate 기본 및 활용

산을넘는다 2020. 6. 23. 19:41

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	div {
		width: 100px;
		height: 100px;
		background-color: red;
		/* position : relative; */
		position : absolute; 
	} 
</style>
<script src="/Lecture-WEB/jquery/js/jquery-3.5.1.min.js"></script>
<script>
	$(document).ready(function() {
		 $('div').animate({
			 
			 
			 /* width : '50px',
			 height: "+=100px" */
			 
			 /* width : 'toggle',
			 height : 'toggle', */
			 
			 left : '100px',
			 top : '50px'
			 
		 }, 2000)
	})
</script>
</head>
<body>
	<div></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	div {
		width: 100px;
		height: 100px;
		background-color: red;
		position: absolute;
	}
</style>
<script src="/Lecture-WEB/jquery/js/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
	$(document).ready(function() {
		$('div').animate({
			'width' : '200px'
		}, 1000)
		
		$('div').animate({
			left: '100px',
			width: '100px'
		}, 2000)
		
	
		$('div').animate({
			'height' : '200px',
			'top' : '100px'
			
		}, 1000)
		
		$('div').animate({
			'height' : '100px',
			'left' : '0px',
			'opacity' : '0.4',
			'background-color' : 'purple',
			'border-radius' : '50%'
			
			
		}, 2000, function(){ // 콜백함수 형태로 붙인다
			$(this).css('background-color', 'pink')
		})
		
		
		
	})
</script>
</head>
<body>
	<div></div>
</body>
</html>