[송규남의 IT다이어리] 제이쿼리(jQuery) 여섯번째 이야기
노용철
view : 648
[송규남의 IT다이어리] 제이쿼리(jQuery) 시작해보기 6
안녕하세요. 중앙HTA의 송규남 강사입니다.
지난 시간에 이어 jQuery 여섯번재 강좌를 시작해보겠습니다.
지난 시간에 jQuery 에서의 이펙트 효과에 대해서 알아봤는데요~
이번에는 이펙트중에서 .animate() 대해서 알아보겠습니다.
.animate() 메소드는 CSS를 변경할 때 지연시간을 설정해서 애니메이션같은 효과를 줄 수 있습니다.
jQuery API Documentation 에서 아래 항목을 선택하면 animate()의 사용방법을 알 수 있는데요
먼저 간단한 예제로 이해해 보도록 하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#box{width:100px;height:100px;background-color:red}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//버튼을 클릭하면 호출
$("#btn").click(function(){
//marginLeft 속성값을 200으로 옮깁니다.
$("#box").css('marginLeft',200);
});
});
</script>
</head>
<body>
<input type="button" vlaue="move" id="btn">
<div id="box">
</div>
</body>
</html>
==> 위의 코드를 작성 후 실행해 봅니다.
div의 marginLeft 값이 변경되면서 div가 오른쪽으로 이동합니다. 하지만 순식간에 이동되어 집니다.
이렇게 CSS값이 변경될 때 순식간에 변경되는 것이 아니라 일정 시간동안 변경해라... 라고 요청하면 div가 이동하는 것 처럼 보여집니다.
코드를 아래처럼 변경해 보세요.
<script type="text/javascript">
#(document).ready(function(){
#("#btn").click(function(){
//$("#box").animate({
'margiLeft':'200px'
});
});
</script>
animate()는 {}안의 CSS 속성값을 0.4초간 변경합니다. 그래서 이동되는 움직임이 보이게 됩니다.
기본시간은 0.4초로 설정되어 있고 아래처럼 시간을 설정 할 수 있습니다.
<script type="text/javascript">
#(document).ready(function(){
#("#btn").click(function(){
$("#box").animate({
'marginLeft':'200px'
},1000);//1초간 marginLeft 속성값을 200으로 옮깁니다.
});
});
</script>
만약 애니메이션 수행 후 해야 할 작업이 있다면 아래처럼 function을 등록해 구현하면 됩니다.
<script type="text/javascript">
$(document).ready(function(){
$("btn").click(function(){
$("#box").animate({
'marginLeft':'200px'
},1000,function(){//애니메이션이 완료된 후 자동 function 수행
alert("Move완료!");
});
});
</script>
실행해 보면 위의 그림처럼 1초간 빨간사각형이 오른쪽으로 이동하고 이동이 끝나면 메시지창이 뜹니다.
이번에는 이런 animate를 이용해서 퀵메뉴를 만들어 보겠습니다.
html 페이지를 추가하고 아래처럼 작성합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#content{
width:1000px;
height:1200px;
background:url("backimage.png");
margin:auto;
}
#quickmenu{
border:2px solid red;
background-color:white
width:120px;
height:410px;
position:absolute
top:50px;
right:200px;
}
#quickmenu ul{
list-style:none;
padding:10px;
}
#quckmenu ul li img{
width:100px;
height:80px;
}
#quickmenu h4{text-align:center}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="quickmenu">
<h4>최근본페이지</h4>
<ul>
<li><a href="#"><img src="1.png"/></a></li>
<li><a href="#"><img src="2.png"/></a></li>
<li><a href="#"><img src="3.png"/></a></li>
<li><a href="#"><img src="4.png"/></a></li>
</ul>
</div>
<div id="content">
</div>
</body>
</html>
==> 위의 코드에 원도우가 스크롤때마다 quickmenu가 이동될 수 있도록 jQuery 코드를 추가합니다.
$(document).ready(function(){
//quickmenu의 최초의 top 속성값 얻어오기
var top=parseInt($("#quickmenu").css("top"));
//window가 스크롤 되어질 때 function 수행
$(window).scroll(function(){
//스크롤 되어진 top의 위치 구하기
var scrollTop=$(window).scrollTop();
//이동할 top의 위치 구하기
var moveTop=top+scrollTop;
$("#quickmenu").stop();//기존에 수행중인 애니메이션 멈추기
//퀵메뉴를 1초간 moveTop의 위치로 이동하기
$("#quickmenu").animate({
top:moveTop
},1000);
});
});
자 위와 같이 작성하니 윈도우가 스크롤 되어질 때 퀵메뉴가 따라다니지요??
이번 강좌에서는 .animate()에 대한 부분을 알아봤습니다.
강좌는 여기서 마무리하고 다음 강좌로 찾아뵙도록 하겠습니다.
<저작권자(c)중앙에이치티에이(주). 무단전재-재배포금지>
