jQuery 애니메이션

jQuery를 사용하면 맞춤 애니메이션을 만들 수 있습니다.jQuery 의 animate()메서드는 사용자 지정 애니메이션을 만드는 데 사용됩니다. 

 

아래의 코드는 jQuery 애니메이션 메소드를 사용한 대표적인 예시이다.

$(selector).animator({params},speed,callback);

speed매개변수는 효과의 지속 시간을 지정한다. 선택적 콜백 매개 변수는 애니메이션이 완료된 후에 실행되는 함수이다.또 jQuery animator()은 여러속성을 조작 할 수 있는데 그와 관련된 예시도 함께 살펴보도록 하자.

 

아래의 코드는 동시에 여러 속성을 애니메이션으로 만든 것이다.

$("button").click(function(){
  $("div").animate({
    left: '250px',
    opacity: '0.5',
    height: '150px',
    width: '150px'
  });
}); 

그리고 jQuery animate()메소드는 상대 값도 사용 할 수 있는데 상대값은 + = 그리고 - = 을 값 앞에 넣음으로써 가능하다.  만약 사전에 정의 된 값을 사용하고 싶다면 속성값에 show,hide,toggle등으로 지정을 하면 된다.

 

이러한 jQuery animation()메서드를 멈추는 방법은 무엇일까? 그것은 jQuery stop()메서드의 사용으로 이루어진다. 이메소드를 사용함으로 애니메이션 또는 효과가 끝나기 전에 중지가 된다. stop()메서드는 슬라이딩,페이딩 및 정의 애니메이션을 비롯한 모든 jQuery효과 함수에서 사용 할 수있다.

 

대표적인 코드를 아래에서 살펴보도록 하자.

$(selector).stop(stopAll,goToEnd);

stopAll매개 변수는 애니메이션 대기열을 지워야 하는지 여부를 지정한다. 기본값은 false이며 활성 애니메이션만 중지되어 나중에 대기중인 애니메이션이 수행 될 수 있다.선택적 goToEnd 매개 변수는 현재 애니메이션을 즉시 완료할지 여부를 지정합니다. 기본값은 false입니다.