메모장
[JQuery] JQuery animation - JQuery로 애니메이션 효과를 주기 본문
html에서 태그의 css를 변경할 때 보통
$('#target').height(500); //또는 $('#target').css('height', 500);
와 같이 높이 또는 위치를 변경할 수 있다.
위의 예시와 같이 변경하게 되면 바로 변경된 css로 표현이 되는데 JQuery에서 제공하는 animation 기능을 통해 변경 시 애니메이션 효과를 줄 수 있다.
장황한 설명보단 한 줄의 코드를 보는게 더 빠르므로 바로 예시 코드를 보면
$('#target').animate({ width: '300px',//속성 값을 넣는다. height: '900px' }, 3000);//3000 부분엔 딜레이 값을 넣는다.
<사용법>
1. animate 선언 후 변경할 속성을 추가한다.
- 속성이 여러개일 떄는 콤마로 구분한다.
- 위 예시 외에도 left, top등의 속성을 기호에 맞게 넣는다.
2. 속성 추가 후 애니메이션 효과가 나타나게 될 딜레이를 넣는다.
- 변경 전부터 변경 후까지 애니메이션 효과가 동작될 시간 값.
- 단위는 밀리세컨드로 넣는다.
<팁>
콜백함수를 넣으면 좀 더 다양한 효과를 넣을 수 있다.
애니메이션 효과가 끝난 후 alert로 알림을 줄 수도 있고 재귀함수로 구현해 같은 일을 계속 반복케 할 수도 있다.
간단한 사용법 소개로 끝마칠 거였으니 여기서 이만 글을 줄인다.
끝
'JavaScript & JQuery' 카테고리의 다른 글
[JQuery] bPopup reposition - bPopup 재 정렬하기 (0) | 2018.05.09 |
---|---|
[JavaScript & Jquery] json 데이터 읽는법 (0) | 2017.10.17 |
자바스크립트 정규식 (0) | 2016.10.20 |
Comments