[jquery] jQuery 입문 04 (170329)

 jQuery 입문 04

• jQuery의 여러가지 Action

- click( )

- show( ), hide( ), toggle( )

- fadeIn( ), fadeOut( ), fadeToggle( )

- addClass("클래스명"), .removeClass( ), .toggleClass( )

- slideUp( ), slideDown( ), slideToggle( )

- mouseover( ), mouseout( )

=> jQuery입문 03에서 설명했던 것과 동일하게 시간, function( ) 속성을 이용 가능하다.

• QUIZ 1 > jquery 이용하여 동적으로 박스 추가하기

ANSWER > 

• stop ( ) 

- .stop( )은 끝나지 않은 애니메이션을 정지하고 새로 시작시킬 때 사용한다.

• animate( ) : .animate({key1:value1, key2:value2, ...}, 적용시간 );

- css 속성중 수치와 관련된 요소들을 조정하는 action

- animate의 괄호 안에는 object요소가 들어가야 한다.

- font-size, border-width 등에서 -는 연산기호로 인식하므로 fontSize 혹은 "font-size"로 입력해야 한다.

• animate 속성에 수식어 적용하기

- marginLeft를 클릭할 때 마다 적용하고 싶을 경우 +=기호를 이용하면 된다.

• animate 속성에 좌표 얻어오기
  

- function( e )를 이용하여 좌표를 얻는다.

- 변수에 넣은 후 animate를 이용하여 이동!