[jQuery] 13.실습:J.estina(callback)

in Web on jQuery


실습: J.estina




/*----------- j.estina.css -----------------*/



*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
li{
	list-style:none;
}
.wrap{
	position:fixed;
	width:100%;
	height:100%;
	background: url(bgBody.jpg) no-repeat center center;	
}
.header{
	width:200px;
}
.header img{
	width:100%;
	margin:35px;
}

.main{
	position:absolute;
	width:30%;
	min-width:400px;
	left:20%;
	top:250px;
	z-index:333;
}

.main img{
	width:100%;
	height:272px;
}

.button{
	position:absolute;
	width:30%;
	min-width:400px;
	left:20%;
	top:550px;
	z-index:333;
	display:flex;
	justify-content:space-between;
}

.button li{
	flex-basis:48%;
	height:30px;
	text-align:center;
	background: rgba(0,0,0, 0.6);
}
.button li a{
	color:#fff;
	display:block;
	text-decoration:none;
}
.button li:hover{
	background: black;
}
.img {
	position:absolute;
	top:0;
	right:-10%;
	height:100%;
}
.img img{
	width:100%;
	height:100%;
}
.con1{
	position:relative;
	left:35%;
	top:10%;
	width:40%;
	height:500px;
	min-width:500px;
	z-index:330;
}
.con1-img{
	display:none;
	height:100%;
}
.con1-img img{
	width:100%;
	height:100%;
}
.con1 span{
	display:none;
	position:absolute;
}
.con1>span:nth-child(1){
	width:0;
	height:1px;
	background: #000;
	left:0; 
	top:0;
}
.con1>span:nth-child(2){
	width:1px;
	height:0;
	background: #000;
	right:0; 
	top:0;
}
.con1>span:nth-child(3){
	width:0;
	height:1px;
	background: #000;
	right:0; 
	bottom:0;
}
.con1>span:nth-child(4){
	width:1px;
	height:0;
	background: #000;
	left:0; 
	bottom:0;
}
.close{
	position:absolute;
	width:50px;
	height:50px;
	background: #000;
	text-align:center;
	top:0;
	right:0;
}
.close a{
	font-size:32px;
	display:block;
	color:#fff;
	text-decoration:none;
}
.con2{
	position:absolute;
	width:100%;
	display:none;
	top:400px;
	text-align:center;
	background: #cebfb8;
	z-index:330;
}
.con2 .close{
	left:0 !important;
}
.con2 img{
	height:333px;
}





/*----------- j.estina.js -----------------*/

$(function(){
	
	$('.button li:nth-child(1)').click(function(){
		main_fade_Out()
		con1_fade_In()
	})
	$('.button li:nth-child(2)').click(function(){
		main_fade_Out()
		con2_fade_In()
	})
	$('.con1 .close').click(function(){
		main_fade_In()
		con1_fade_Out()
	})
	$('.con2 .close').click(function(){
		main_fade_In()
		con2_fade_Out()
	})
	//main 없앰
	function main_fade_Out (){
		$('.main').animate({'top':'100px','opacity':'0'},800)
		$('.button').animate({'top':'700px','opacity':'0'},800)
		$('.img').animate({'right':'-25%'},800)	
	}
	//main 나타냄
	function main_fade_In (){
		$('.main').animate({'top':'250px','opacity':'1'},800)
		$('.button').animate({'top':'550px','opacity':'1'},800)
		$('.img').animate({'right':'-10%'},800)	
	}
	//con1 나타냄
	function con1_fade_In(){
		$('.con1 span').css({'display':'block'})
		draw_line('.con1')
	}
	//con1 없앰
	function con1_fade_Out(){
		fade_line('.con1')
	}
	//con2 나타냄
	function con2_fade_In(){
			$('.con2').slideDown(1000)
	}
	//con2 없앰
	function con2_fade_Out(){
			$('.con2').slideUp()
	}
	//테두리 그리고 나타냄
	function draw_line(box){
		$(box+' span:nth-child(1)').animate({'width':'100%'},800,
		function(){
			$(box+' span:nth-child(2)').animate({'height':'100%'},800,
				function(){
					$(box+' span:nth-child(3)').animate({'width':'100%'},800,		function(){
							$(box+' span:nth-child(4)').animate({'height':'100%'},800,
							function(){
								$('.con1-img').css({'display':'block'})
							})
					})
				})
		})
	}
	//테두리 없앰
	function fade_line(box){
		$(box+' span:nth-child(4)').animate({'height':'0'},100,
		function(){
			$(box+' span:nth-child(3)').animate({'width':'0'},100,
				function(){
					$(box+' span:nth-child(2)').animate({'height':'0'},100,		function(){
							$(box+' span:nth-child(1)').animate({'width':'0'})
					})
				})
		})
		$('.con1-img').css({'display':'none'})
	}
})





<!-------------------j.estina.html------------------->

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>j.estina</title>
	<link rel="stylesheet" href="j_estina.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="j_estina.js"></script>
</head>
<body>
<div class="wrap">
	<div class="header">
		<img src="logo.png" alt="">
	</div>
	<div class="main">
		<img src="txt.png" alt="">
	</div>
	<ul class="button">
		<li><a href="#">녹턴</a></li>
		<li><a href="#">춤추는 댄싱스톤</a></li>
	</ul>
	
	<div class="img">
		<img src="woman.png" alt="">
	</div>
	<div class="con1">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<div class="con1-img">
			<img src="pic1.png" alt="">
			<div class="close">
				<a href="#">X</a>
			</div>
		</div>
	</div>
	<div class="con2">
		<img src="pic2.png" alt="">
			<div class="close">
				<a href="#">X</a>
			</div>
	</div>
</div>
</body>
</html>




실행결과