jQuery로 애니메이션 만들기
.animate({속성1 : 속성값1, 속성2:속성값2, 속성3:속성값3..},시간,콜백(애니메이션이 끝나고 할 행동))
* 속도 default : 400ms = .4s
* slow : 600ms
*fast : 200ms
* 직접 시간 입력 가능
<HTML>
<CSS>
<화면>
* 일반 CSS 속성 넣기 *
* 애니메이트는 css와 같이 할 수 없다. 무조건 객체 이용해야함 *
1. 속성과 속성값 : CSS문법일 경우 ''를 붙이고 js 문법일 경우에는 안붙인다. px 는 안붙인다.
- 안됨
- 되는경우
*margin-left의 경우
- 안됨
-되는경우
2. 속도를 넣은 animate ( 오른쪽으로 200px 가는 애니메이션. css에서 position : relative를 넣어놔서 left만 써도 사용가능하다)
3. 한 애니메이트에 여러 동작 넣기
: 동시에 여러 동작이 같이 실행됨
4. 여러 animate가 들어간 경우 ( 같은 선택자 )
: 한 동작이 끝난 후 다음 동작이 실행됨.
5. 여러 animate가 들어간 경우 (다른 선택자)
: 동시에 동작 실행
6. 콜백 : animation이 끝난 후 시행할 것
아래의 그림은 콜백으로 많이 중첩된 콜백지옥이다.
* 해결방안 : es6 - promise, await / async : 차차 공부할 예정. ie 낮은 버전에서 지원이 안되지만 webpack을 이용하면 사용 가능하다.
*7. toggle : 있으면 없어지고 없으면 생긴다.
'프론트엔드 > ㄴjQuery' 카테고리의 다른 글
| <jQuery> each 반복문 (0) | 2017.08.25 |
|---|---|
| <jQuery> 슬라이드 만들기 (0) | 2017.08.25 |
| <jQuery> 선택자와 스타일(css) (0) | 2017.08.18 |
| <jQuery> js와 jQuery 같이 쓰기 (0) | 2017.08.18 |
| <jQuery> js 파일연결이 헤드 혹은 태그보다 위에 있을 때 해결방안 (0) | 2017.08.18 |