제이쿼리 animate 메서드 특징과 사용법
css에서 동작에 대한 시간을 부여하기 위해선 transition 속성을 동작을 수행하는 선택자마다 직접 넣어줘야 하는 번거로움이 있었습니다. 반면, animate method는 동작을 바꿈과 동시에 시간을 같이 부여하는 특징을 가지고 있습니다!
.animate() = 애니메이션 동작을 부여할 수 있는 메서드, 시간에 대한 속도를 부여함
$("선택자").animate({명령내용},시간,'이징효과');
animate 메서드에서의 시간은 밀리초단위를 사용합니다
밀리초단위(millisecond, ms)=천 분의 1초
1초=1000ms, 0.5초=500ms
이징효과 종류
1. ease : 기본값
2. ease-in : 속도의 시작이 느리게
3. linear : 일정한 속도
4. ease-out : 속도를 느리게 끝이 나도록
5. ease-in-out : 느리게 시작해서 느리게 끝이 나도록
.animate() 특징
1) .animate() ui 확장 라이브러리 연결 사용
.animate() 메서드 기본제이쿼리에는 색상에 대한 스트립트가 없습니다. 따라서 확장 ui 라이브러리를 연결해서 사용해야 하는데요.
사용하고 싶은 애니메이션을 커스텀으로 다운로드할 수 있는 장점이 있지만, 전체 파일의 용량이 크지 않아서 Stable 파일을 다운로드하여도 괜찮습니다.
ui 확장라이브러리를 연결 할 때, 제이쿼리가 먼저 연결되어 있는지 확인한 뒤 script src로 연결해 주면 됩니다. 스크립트는 연결 순서가 정말 중요하기 때문에 이 부분을 꼭 신경 써줘야 해요.
2) 실행시점을 제어하기 위해 .stop()를 앞에 붙여서 사용
.animate() 메서드는 이벤트의 실행시점이 쌓이는 성격을 가지고 있습니다. 예를 들어 mouseover에 대한 animate를 지정해 뒀을 때, mouseover을 n회 수행하면 animate는 이를 카운팅 해서 같은 횟수만큼 진행하게 됩니다. 따라서 mouseover를 더 이상 하지 않더라도 앞쪽에 쌓인 실행시점들이 원래의 속도대로 진행되며 동작을 이어가게 됩니다. 이를 끊어주기 위해서 .animate() 앞쪽에 .stop()을 붙여 실행시점을 제어시켜 주게 됩니다.
$("선택자").stop().animate({roate:'720deg',fontSize:'24px'},500,'linear');
3) $(this) 선택자
선택한 요소의 개별적인 요소를 선택하고 싶을 때 사용하는 선택자입니다. css에서도 적용가능해요. 다만, 이벤트 명령대상이거나 혹은 명령 대상의 자식요소에게만 사용가능합니다.
$("h1").on({
mouseover:function(){
$(this).stop().animate({rotate:'720deg',fontSize:'16px'},500,'linear');
},
mouseout:function(){
$(this).stop().animate({
backgroundColor:'0063da',
fontSize:'24px'
},1000,'linear');
}
})
'Today I learned > 웹퍼블리셔' 카테고리의 다른 글
jquery(제이쿼리) 기초문법, 실행명령 (3) | 2024.09.18 |
---|---|
css 레이아웃 overflow 속성 (0) | 2024.08.01 |
html 글자태그 5개 이상 활용하여 자기소개 만들어보기 (0) | 2024.07.22 |
html 인라인 요소 글자태그 (0) | 2024.07.22 |
html 블록요소 성질의 글자태그 (0) | 2024.07.21 |