일반 애니메이션 - show( ), hide( )
show와 hide 메소드는 기본 제공되는 애니메이션 효과로 각각 대상을 나타내고 숨기는 기능을 한다.
6초동안 애니메이션이 일어나고 완료되었을 시 알림창이 나타나도록 했다.
hide를 실행했을 시 사진이 6초간 감춰지며 알림창이 나타난다.
show를 실행했을 시 사진이 다시 나타나며 알림창이 나타난다.
jQuery easing - 애니메이션에 효과주기
jQuery easing의 재밌는 효과 - codeJS
jQuery의 easing를 사용하면 시각적으로 한층 더 풍부한 재미를 제공할 수 있습니다.
www.codejs.co.kr
jQuery에서 애니메이션에 다양한 효과를 주고자 easing기능을 제공한다.
jQuery Easing Plugin
Please note, the easing function names changed in version 1.2. Example Click on any of the yellow headers to see the default easing method in action (I've set as easeOutBounce for the demo, just because it's obviously different). All done with a straight a
gsgd.co.uk
이징 플러그인 사용을 위해서 사이트의 다운로드 탭의 query.easing.1.3.js를 다운받아준다.
다운받은 플러그인을 경로 지정을 해준 뒤 사용한다.
앞서 만들었던 애니메이션에 익명함수 부분 대신 easing의 종류중 하나를 선택해서 넣어준다.
hide실행 시 전보다 초반엔 훨씬 느리게 줄어들다 마지막쯤 빠르게 사진이 숨겨진다.
'Front-end > JavaScript' 카테고리의 다른 글
| [JS] 함수형 클래스 (0) | 2022.06.14 |
|---|---|
| [JS] 리터럴 클래스 (0) | 2022.06.14 |
| [자바스크립트] 스크롤 위치 구하기, 스크롤 맨 위로, 위치 이동 (0) | 2022.06.11 |
| [자바스크립트] 새 창 만들기, 창 크기 변경, 윈도우 창 이동, 위치출력 (0) | 2022.06.10 |
| [자바스크립트] js로 웹 문서, 스크린, 브라우저의 크기 구하기 (0) | 2022.06.09 |