Today I learned/웹퍼블리셔

제이쿼리 .animate() 메서드 특징과 사용법

shunin 2024. 9. 19. 22:43

제이쿼리 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 라이브러리를 연결해서 사용해야 하는데요.

ui 확장라이브러리 연결
stable 다운로드

사용하고 싶은 애니메이션을 커스텀으로 다운로드할 수 있는 장점이 있지만, 전체 파일의 용량이 크지 않아서 Stable 파일을 다운로드하여도 괜찮습니다. 

 

ui 확장라이브러리를 연결 할 때, 제이쿼리가 먼저 연결되어 있는지 확인한 뒤 script src로 연결해 주면 됩니다. 스크립트는 연결 순서가 정말 중요하기 때문에 이 부분을 꼭 신경 써줘야 해요.

jquery 밑에 연결된 jquery-ui 확장라이브러리

 

 

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');
            }
           })

$(this) 선택자 사용 결과