이번 시간에는 요소를 이동 시켜보는 것을 연습해 보겠습니다.
위에 박스 하나가 자신의 색을 바꿔 가면서 이동을 해가면서 원위치로 돌아가는것 보이시죠? 저것이 바로 animate()입니다.
그럼 animate()에 대해서 공부해 봅시다.
$('.hello').animate({
top:100,
left:200
});
위의 소스는 어떤 특정 요소를 아래로 이동시키는 소스 입니다.
<div class="hello"></div>
.hello{width:100px; height:50px; background:pink; position:absolute; top:50px; left:50px}
위와 같이 코딩을 하면 아래의 소스가 되겠죠? 웹에서 보기 버튼을 눌러서 결과를 확인 해보시기 바랍니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>제이쿼리</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
$('.hello').animate({
top:100,
left:200
});
});
</script>
<style type="text/css">
.hello{width:100px; height:50px; background:pink; position:absolute; top:50px; left:50px}
</style>
</head>
<body>
<div class="hello"></div>
</body>
</html>
$('.class_Name').animate({
},시간값);
위의 예제에 시간값을 5초로 설정하여 넣어 본다면
$('.hello').animate({
top:100,
left:200
},5000);
아래 소스를 테스트 해보도록 하자
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>제이쿼리</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
$('.hello').animate({
top:100,
left:200
},5000);
});
</script>
<style type="text/css">
.hello{width:100px; height:50px; background:pink; position:absolute; top:50px; left:50px}
</style>
</head>
<body>
<div class="hello"></div>
</body>
</html>
위치한 좌표까지 도달하는데 5초가 소요된다.
이걸 응용하여 어려가지 자신이 원하는 것을 만들 수 있다.
그러면 위의 소스에서 저렇게 이동을 한 후에 다시 무언가가 발생하길 원한다면 어떻게 해야 할까?
다시 원위치 하는 것을 해보도록하자.
function(){};
이부분을 animate({});의 {}가 끝난후에 넣어 준다.
단, function(){}의 앞에 ,을 넣어준다.
animate({
},function(){
};
});
그리고 어떠한 행위를 function(){};의 {}안에 넣어준다.
$('.hello').animate({
top:50,
left:50
});
위의 소스를 적용해본다면
$('.class_Name').animate({
},function(){
$('.hello').animate({
top:50,
left:50
});
};
);
그럼 실제 적용 해보도록 하자
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>제이쿼리</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
$('.hello').animate({
top:100,
left:200
},function(){
$('.hello').animate({
top:50,
left:50
});
});
});
</script>
<style type="text/css">
.hello{width:100px; height:50px; background:pink; position:absolute; top:50px; left:50px}
</style>
</head>
<body>
<div class="hello"></div>
</body>
</html>
이렇게 응용하면 이 강좌 제일 위에 위치한 핫핑크색의 박스의 움직임도 구현할 수 있다.
이걸로 애니메이션효과에 대한 강좌를 마치겠습니다.
봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.
당신의 작은 누름이 저에게는 큰 희망이 됩니다.
댓글 0개
정렬기준
