Animation
| 유형 | 메서드 | 설명 |
|---|---|---|
| Basic | .hide() | 선택한 요소를 숨깁니다. |
| .show() | 선택한 요소를 보여줍니다. | |
| .toggle() ♥ | 선택한 요소를 숨김/보여줍니다. | |
| Fading | .fadeIn() | 선택한 요소를 천천히 보여줍니다. |
| .fadeOut() | 선택한 요소를 천천히 숨김니다. | |
| .fadeto() | 선택한 요소를 투명도를 조절합니다. | |
| .fadeToggle() | 선택한 요소를 천천히 숨김/보여줍니다. | |
| Sliding | .slideDown() | 선택한 요소를 슬라이딩으로 보여줍니다. |
| .slideToggle() | 선택한 요소를 슬라이딩으로 숨김/보여줍니다. | |
| .slideUp() | 선택한 요소를 슬라이딩으로 숨김니다. | |
| custom | .animate() ♥ | 선택한 요소에 애니메이션을 적용합니다. |
| .clearQueue() | 선택한 요소에 첫 번째 큐만 실행하고 대기 중인 큐는 모두 삭제합니다. | |
| .delay() | 선택한 요소의 애니메이션 효과를 지연합니다. | |
| .dequeue() | 선택한 요소 스택에 쌓인 큐를 모두 제거합니다. | |
| .finish() | 선택한 요소의 진행중인 애니메이션을 강제로 종료합니다. | |
| .queue() | 선택한 요소 스택에 대기 중인 큐를 반환하거나 추가할 수 있습니다. | |
| .stop() | 선택한 요소의 실행중인 애니메이션을 정지합니다. |
Animation
$("selector").animate(properties);
$("selector").animate(properties, duration);
$("selector").animate(properties, duration, easing);
$("selector").animate(properties, duration, easing, collback);
properties : border, margin, padding, width, height,
font-size, bottom, left, top, right, line-height
transform(x)
//폰트 사이즈를 현재 크기에서 20px로 2초동안 애니메이션
$("선택자").animate({"font-size":"20px"},2000);
$("선택자").animate({fontSize:"20px"},2000);
//선택한 요소를 왼쪽, 오른쪽 마진값을 100px을 600밀리세컨드 동안 애니메이션
$("선택자").animate({marginLeft:100, marginRight:100},600);
$("선택자").animate({marginLeft:100, marginRight:100},"slow");