[jQuery입문] 애니메이션

ㅇ show() / Hide()

  - jQueryObject.show();  jQueryObject.hide();

  - 시간을 줄 수도 있다.(단위 밀리세컨드)

    ex) jQueryObject.show(500); // 0.5초로 표시하는 애니메이션

ㅇ fadeIn() / fadeOut()

  - jQueryObject.fadeIn();  jQueryObject.fadeOut();

  - 애니메이션 속도는 밀리세컨드 단위로 줄 수도 있고, 'fast', 'slow'로 지정할 수 있다.

    ex) jQueryObject.fadeIn(1000);  jQueryObject.fadeOut('slow');

  - 애니메이션 종료 시에 Javascript를 추가로 실행할 수도 있다.

ㅇ slideDown() / slideUp()

  - jQueryObjct.slideDown();  jQueryObject.slideUp();

  - fadeIn()과 동일한 방법으로 사용

ㅇ animate()

  - jQueryObject.animate({  프로퍼티명: 값,  프로퍼티명: 값 });

  - 단, 프로퍼티명을 사용할 때에는 margin-right과 같이 하이픈(-)이 들어 있는 것에 대해서는 따옴표를 해줘야 한다.

  - animate에서 사용할 수 있는 프로퍼티는 숫자 값만 취할 수 있는 것들이다. (예, width, height, margin, padding, font-size 등)

box

ㅇ animate()의 속도 지정 및 종료 시 Javascript 실행 방법

  - 속도 지정

  - 종료 시 Javascript 실행 방법