제이쿼리(J-Query) 메소드 animate()

제이쿼리 animate() 메소드

: 선택한 요소를 설정한 시간동안 애니메이션 처리

 

 

 

문법 

$("selector").animate({

   // code

}, time, 속도);

 

* 속도 : 애니메이션 속도가 빨랐다 느려지거나 느렸다 빨라지는 등 변화를 주고자 할 때 사용, easing 플러그인 연결 시 설정 가능

- linear : 일정 속도

- swing : 속도가 점점 느려진다

cdnjs.com/libraries/jquery-easing

jquery-easing - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

 

 

ex.

$(function(){

  $(".rolling").animate({

    width:"500px",

    height:"500px"

  }, 2000);

});

 

$(function(){

 $(".wrap .banner").click(function(){

   $(".wrap .banner").animate({

      width:"700px",

      height:"300px"

    }, 3000);

  });

});

 

 

 

 

 

참고사항

 

animate () 메서드를 사용하여 모든 CSS 속성을 조작 할 수 있습니까?

네, 거의! 그러나 기억해야 할 중요한 사항이 있습니다. 모든 속성 이름은 animate () 메서드와 함께 사용할 때 카멜 케이스 여야합니다. padding-left 대신 paddingLeft, margin-right 대신 marginRight 등을 작성해야합니다.

또한 색상 애니메이션은 핵심 jQuery 라이브러리에 포함되어 있지 않습니다.

색상에 애니메이션을 적용하려면 jQuery.com에서 색상 애니메이션 플러그인 을 다운로드해야합니다 .

 

 

www.w3schools.com/jquery/jquery_animate.asp

jQuery Effects - Animation

 

* 카멜케이스

: 프로그래밍에서 파일, 변수, 함수 등 대상의 이름을 띄어쓰기 없이 짓기 위하여 따르는 관례인 네이밍컨벤션(Naming convention)의 하나다.

 

 

 

 

 

test.

ryu8811.github.io/jungle/class_4/05_slide.html