[jQuery]제이쿼리 animate() 메서드

# 기본값:
$("요소선택").animate({스타일속성}, 적용시간, 가속도, 콜백함수);

/* 기능추가기재하기!! */

See the Pen [jQuery]animate1 by kaia (@kaiaakim) on CodePen.

<p><button class="btn1">버튼1</button></p>
<span class="txt1">"500px"이동</span>
<p><button class="btn2">버튼2</button></p>
<span class="txt2">"50px"씩 이동</span>

    $(function(){
      $(".btn1").on("click", function(){
        $(".txt1").animate({marginLeft : "500px", fontSize : "30px"}, 2000, "linear", function(){
          alert("모션완료");
        });
      });
      // [버튼1]을 클릭하면 class값이 "txt1"인 요소가 2초동안 오른쪽 방향으로 500px만큼 이동하고 글자의 크기는 30px 커지고, 애니메이션이 완료되면 콜백 함수가 실행된다.

      $(".btn2").on("click", function(){
        $(".txt2").animate({marginLeft : "+=50px"}, 1000);
      });
    });

 

 

See the Pen [jQuery]animate2 by kaia (@kaiaakim) on CodePen.

<p class="txt1">효과1</p>
<p class="txt2">효과2<br>delay(3000)</p>

<p><button class="btn1">50px 전진</button></p>
<p class="txt3">효과3</p>
<p class="txt4">효과4<br>stop()</p>
<p class="txt5">효과5<br>stop(true,true)</p>

$(function(){
  $(".txt1").animate({marginLeft:"300px"},1000); //1초동안 300px 이동
  $(".txt2").delay(3000).animate({marginLeft:"300px"},1000); //.delay 는 앞에써야함
  $(".btn1").on("click", moveElement);

  function moveElement(){
    $(".txt3").animate({marginLeft:"+=50px"},800); //값을 누적하기 위해선 += 연산자로 작성
    $(".txt4").animate({marginLeft:"+=50px"},800);
    $(".txt4").stop();
    $(".txt5").animate({marginLeft:"+=50px"},800);
    $(".txt5").stop(true, true);
    //stop(true, true)가 실행되면[버튼1]을 눌러도 애니메이션이 바로 종료 시점으로 이동한다.
    //그래서 애니메이션 없이 css()메서드를 적용한 것처럼 50px씩 이동한다.
  };
});