[JQUERY] 애니메이션 효과

 

animate( ) : 처리 대상에 애니메이션 효과를 줄 때 사용하는 메소드

.anmaite({
        /* 첫 번째 매개 변수 */
        'CSS 속성 1' : '값 1',
        'CSS 속성 2' : '값 2',
        'CSS 속성 3' : '값 3'
    }, 
    /* 애니메이션 실행 시간 */,
    /* 이징 종류 */,
    function() {
        //이벤트
    }
);

- 첫 번째 매개 변수 : 애니메이션 효과 실행 완료 시, 외형을 표현하는 CSS 속성과 값을 전달

- 애니메이션 실행 시간 : 얼마만큼 시간이 지난 후에 애니메이션 효과를 적용하는지 지정

- 이징 종류 : 애니메이션 효과의 변화 속도

  - linear : 같은 속도, 완급 조절 없이 일정한 속도로 움직임 

  - swing : 가벼운 완급 조절, 애니메이션 효과의 속도가 약간 변함 

- function ( ) { } : 애니메이션 효과 종료 시 수행할 작업 지정

 

사용 시 주의사항

animate( ) 메소드는 애니메이션 효과가 실행 중인 같은 요소에 다른 animate( ) 메소드를 실행해도 겹치는 애니메이션 효과 실행을 취소하지 않고 대기하도록 되어 있음

 

 

---

 

 

stop( ) : 요소에 적용된 애니메이션 효과를 중지시키는 메소드

매개 변수	설명
true	애니메이션 효과를 취소함
false	애니메이션 효과를 취소하지 않음

$('#hello').stop(true).animate({ });

stop( ) 메소드는 animate( ) 메소드 앞에 작성햐애함

-> 뒤에 작성하면 애니메이션 효과의 실행이 곧바로 취소되므로 아무런 동작을 하지 않음