메뉴 닫기

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

0 답변 글타래를 보이고 있습니다
  • 글쓴이
    • #6918
      Im.CodeIm.Code
      Keymaster
      • 토픽 23
      • 답변 0
      @imcode

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

      <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({})의 마지막 중괄호와 소괄호 사이에 쉼표를 통해 이동할때 걸리는 시간, 혹은 다음에 사용할 코드를 입력할 수 있음.
      즉 위의 예제대로 하면 .ex1top: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으로 다시 이동을 무한반복함.

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

      Hello, World !

0 답변 글타래를 보이고 있습니다
  • 답변은 로그인 후 가능합니다.

이메일 구독 - Email Subs

최선을 다해 직접 만든 콘텐츠만 공유합니다.
We share the best content we have created.

이메일 구독 - Email Subs

최선을 다해 직접 만든 콘텐츠만 공유합니다.
We share the best content we have created.