[jQuery] 12.callback

in Web on jQuery


callback




<!-------------------callback.html------------------->

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>callback</title>
	<style>
		*{
			margin:0;
			padding:0;
			box-sizing:border-box;
		}
		.box{
			position:relative;
			width:800px;
			height:500px;
			margin:100px auto;
			background: skyblue;
		}
		span{
			display:block;
			position:absolute;
		}
		span:nth-child(1){
			width:0%;
			height:2px;
			background: #000;
			left:0; 
			top:0;
		}
		span:nth-child(2){
			width:2px;
			height:0;
			background: #000;
			right:0; 
			top:0;
		}
		span:nth-child(3){
			width:0;
			height:2px;
			background: #000;
			right:0; 
			bottom:0;
		}
		span:nth-child(4){
			width:2px;
			height:0;
			background: #000;
			left:0; 
			bottom:0;
		}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script>
		$(function(){
			/*$('span:nth-child(1)').animate({'width':'100%'})
			$('span:nth-child(2)').animate({'height':'100%'})
			$('span:nth-child(3)').animate({'width':'100%'})
			$('span:nth-child(4)').animate({'height':'100%'}) // 콜백을 하지 않으면 4가지가 동시에 실행됨*/
			
			//콜백: 처음 함수 실행 후 다음 것 실행
			$('span:nth-child(1)').animate({'width':'100%'},1000,function(){
				$('span:nth-child(2)').animate({'height':'100%'},1000,function(){
					$('span:nth-child(3)').animate({'width':'100%'},1000,function(){
						$('span:nth-child(4)').animate({'height':'100%'})
					})
				})
			}) 
		})
	</script>
</head>
<body>
	<div class="box">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
</body>
</html>




실행결과