<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<style>
*{box-sizing: border-box;}
body{height:100vh;}
.section1{width: 740px; position: relative;
left: 50%; top:50%; transform: translate(-50%,-50%);}
.section1 img{width: 100%; opacity:0;}
.section1 p{position: absolute; background: #000;}
p.top{width: ; height: 1px; left:0; top:0; }
p.right{width: 1px; height: ; right:0; top:0;}
p.bottom{width: ; height: 1px; right:0; bottom: 0;}
p.left{width: 1px; height: ; left:0; bottom:0;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
$('p.top').animate({'width':'100%'},1000,function(){
$('p.right').animate({'height':'100%'},function(){
$('p.bottom').animate({'width':'100%'},function(){
$('p.left').animate({'height':'100%'},function(){
});
});
});
});
});
</script>
</head>
<body>
<section class="section1">
<p class="top"></p>
<p class="right"></p>
<p class="bottom"></p>
<p class="left"></p>
<img src="img/section1.png" alt=""/>
</section>
</body>
</html>
스크립트를 아래처럼 그리면 순서대로 박스를 그려준다.
<script>
$(function(){
$('p.top').animate({'width':'100%'},1000,function(){
$('p.right').animate({'height':'100%'},function(){
$('p.bottom').animate({'width':'100%'},function(){
$('p.left').animate({'height':'100%'},function(){
});
});
});
});
});
</script>
스크립트를 아래처럼 그리면 동시에 선 그리기가 시작되어 박스를 그려준다.
<script>
$(function(){
$('p.top').animate({'width':'100%'},1000,function(){});
$('p.right').animate({'height':'100%'},function(){});
$('p.bottom').animate({'width':'100%'},function(){});
$('p.left').animate({'height':'100%'},function(){});
});
</script>
'얼렁뚱땅코드 > jquery' 카테고리의 다른 글
| swiper 사용하기 (0) | 2019.09.27 |
|---|---|
| 0926 마지막 수업_클릭하면 애니메이션 실행하기 (0) | 2019.09.26 |
| position:relative 사용시 화면의 가운데 맞추기 (0) | 2019.09.26 |
| 클릭하면 다른 이미지와 다른 글씨들이 보이게 하기:호텔농심참고 (0) | 2019.09.26 |
| 0926 첫수업 (0) | 2019.09.26 |