[jQuery] animation vs animate의 차이점?

dygreen·2022년 4월 12일
0

jQuery

목록 보기
3/3
post-thumbnail

🗒 비슷해보이지만 확실히 다른 animation과 animate의 차이점을 정리해보겠습니다!

간단하게,
animation숨기거나 표시하기, 아래로 펼쳐짐 등등의 효과로 태그를 동작시키는 것이고,
animate는 css스타일을 통해 태그를 동작시키는 것입니다.

📌 animation

| 중요 명령어 |
.show() / .hide() / .toggle()
.slideDown() / .slideUp() / .slideToggle()
.fadeIn() / .fadeOut() / .fadeToggle()

| 속도 지정 가능 |

애니메이션효과의 속도: "slow" "normal(기본값)" "fast"
밀리초단위로 지정(1초=1000밀리초)
👉 $("div").show(1000);

| 콜백함수 추가 가능 |

👉 $(셀렉터).show(속도, 콜백함수)
콜백함수라는 것은 애니메이션 효과가 끝난 후 이어서 실행되는 명령


📌 animate

: 거의 모든 css스타일을 사용할수 있으나 색상 애니메이션은 포함되어 있지않음
👉 색상 애니메이션을 사용하려면 관련 파일을 연결해야 함

$("선택자").animate({속성:"값",속성:"값"...} );
⭐️ animate 의 명령어에 "" 부호를 붙이지않음
⭐️ css명령어 단어 사이,; "-"를 빼고 2번째 단어의 첫글자는 대문자로 표시함


📚 Reference

: 국비지원 수업

profile
✨감명깊은 앞단을 향한 꾸준한 여정✨

0개의 댓글