[jQuery] 애니메이션 구현하기
필그램
·2017. 11. 1. 04:05
위와 같은 상자를 움직이는 애니메이션을 구현하고자 합니다.
$("document").ready(function() {
$("#go").click(function() {
jQuery 에 아이디 go를 클릭했을때 펑션이라는 것을 말합니다.
$("#testDiv").animate({width: 400}, 300)
아이디 testDiv를 .animate 애니메잇 하는 것입니다. 넓이는 400픽셀로, 3초간 넓힌다는 의미입니다.
.animate({height: 300}, 400)
높이를 300픽셀, 4초간 늘립니다.
.animate({left: 200}, 500)
왼쪽을 200만큼, 5초간 넓힙니다.
.animate({top: "+=100", borderWidth: 10}, "slow")
위쪽을 100픽셀 증가시키므로, 아래로 내려오며, 굵기는 10픽셀이고, 천천히 움직이는 것입니다.
스크립트는 아래와 같고,
<script type="text/javascript">
$("document").ready(function() {
$("#go").click(function() {
$("#testDiv").animate({width: 400}, 300)
.animate({height: 300}, 400)
.animate({left: 200}, 500)
.animate({top: "+=100", borderWidth: 10}, "slow")
});
});
</script>
아래는 전체 코드입니다.
<html>
<head>
<title>Animations</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../style.css" />
<script type="text/javascript" src="../jquery-3.0.0.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$("#go").click(function() {
$("#testDiv").animate({width: 400}, 300)
.animate({height: 300}, 400)
.animate({left: 200}, 500)
.animate({top: "+=100", borderWidth: 10}, "slow")
});
});
</script>
<style>
#testDiv {
position: relative;
width: 150px;
height: 100px;
margin: 10px;
padding: 20px;
background: #b3c8d0;
border: 1px solid black;
font-size: 16pt;
cursor: pointer;
}
</style>
</head>
<body>
<h1>jQuery 애니메이션</h1>
<div id="content">
<p>jQuery </p>
<button id="go">애니메이션 시작</button>
<div id="testDiv"></div>
</div>
</body>
</html>
반응형
'프로그래밍 > jQuery' 카테고리의 다른 글
| [jQuery] 셀렉터의 필터링 (0) | 2017.11.03 |
|---|---|
| [jQuery] 셀렉터 사용하기 (Selectors) (0) | 2017.11.01 |
| [jQuery] 제이쿼리 환경설정 (0) | 2017.11.01 |
| [jquery] 이벤트 핸들링 (0) | 2017.11.01 |
| [jquery] 컨텐츠 내용 생성 및 수정 (0) | 2017.11.01 |
프로그래밍/jQuery 카테고리와 연관된 콘텐츠
남다른 논리논리적인 생각을 공유합니다.
