일단 아래의 예제를 깔고 시작함.
<div class="ex1">example</div>
<style>.ex1{position:relative;}</style>
ex1
라는 클래스와, 스타일은 position:relative
를 줘서 top,left
같은 포지션이 먹히게 세팅.
jquery니까 역시 적당한 버전의 스크립트를 불러오고
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
아래의 코드를 통해서 움직일 수 있음.
<script>
$('.ex1').animate({
top:50,
left:50
},2000);
</script>
처음 $('')
의 따옴표 사이에 클래스명을 넣고, .animate({})
의 중괄호 사이에 css를 쉼표 단위로 넣고, 그 다음 .animate({})
의 마지막 중괄호와 소괄호 사이에 쉼표를 통해 이동할때 걸리는 시간, 혹은 다음에 사용할 코드를 입력할 수 있음.
즉 위의 예제대로 하면 .ex1
를 top:50,left:50
으로 2000
(2초)에 걸려 이동한다.
그리고 다음에 추가적인 움직임을 주고 싶다면 마지막 이동시간 뒤에 쉼표를 찍고
function(){
$('.ex1').animate({
top:200,
left:200
},2000);
}
를 추가하면 됨. 계속해서 같은 방식으로 다음 동작을 할 수 있음. 추가한 예제는 아래와 같음.
$(function(){
$('.ex1').animate({
top:50,
left:50
},2000,function(){
$('.ex1').animate({
top:200,
left:200
},2000);
});
});
이렇게 하면 top:50,left,50
을 2초동안 이동하고 난 뒤, top:200,left200
으로 다시 이동함.
만약 이 2가지 이동을 무한반복 하고싶다면 처음 function
뒤에 한 칸 띄고 요소명을 적고, 같은 요소명을 마지막 지연시간 뒤에 쉼표와 함께 추가하면 됨.
위의 똑같은 예제를 무한반복 시키면 아래와 같음.
$(function ccc(){
$('.ex1').animate({
top:50,
left:50
},2000,function(){
$('.ex1').animate({
top:200,
left:200
},2000,ccc);
});
});
이렇게 하면 top:50,left,50
을 2초동안 이동하고 난 뒤, top:200,left200
으로 다시 이동을 무한반복함.
특정 환경에서 무한반복이 안되는 경우가 있음. 뭐가 문제인지 알게되면 다시 적음.