jQuery animate를 사용해 css 이동, 무한반복 튜토리얼 연습

일단 아래의 예제를 깔고 시작함.

<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으로 다시 이동을 무한반복함.

특정 환경에서 무한반복이 안되는 경우가 있음. 뭐가 문제인지 알게되면 다시 적음.