여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. jQuery - Effects - Animation
jQuery – Effects – Animation
7개월전 작성
7개월전 수정

Animation

jQuery를 사용하면 사용자 정의 애니메이션을 만들 수 있다.

animate() 메서드

jQuery 의 animate() 메서드는 사용자 정의 애니메이션을 만드는 데 사용된다.

형식
$(selector).animate({params},speed,callback);
매개변수
params
:
애니메이션을 적용할 CSS 속성을 정의한다.
speed
:
효과의 지속 시간을 지정합니다. “느림”, “빠름” 또는 밀리초 값을 사용할 수 있다. 선택 사항.
callback
:
애니메이션이 완료된 후 실행되는 함수다. 선택 사항.
예제
$("button").click(function(){
  $("div").animate({left: '250px'});
});
기본 예시
예제 보기

⭐ 기본적으로 모든 HTML 요소는 정적 위치를 가지며 이동할 수 없다. 위치를 조작하려면 먼저 요소의 CSS 위치 속성을 상대, 고정 또는 절대로 설정해야 한다.

animate() – 여러 속성 조작

여러 속성을 동시에 애니메이션화할 수 있다.

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

⭐ animate() 메서드와 함께 사용할 때 모든 속성 이름은 카멜식으로 표기되어야 한다. padding-left 대신 paddingLeft, margin-right 대신 marginRight 등을 작성해야 한다.

⭐ 핵심 jQuery 라이브러리에는 컬러 애니메이션이 포함되어 있지 않다. 색상에 애니메이션을 적용하려면 jQuery.com에서 Color Animations 플러그인을 다운로드해야 한다.

animate() – 상대값 사용

상대 값을 정의하는 것도 가능하다(값은 요소의 현재 값을 기준). 값 앞에 += 또는 -=를 넣으면 된다.

예제
$("button").click(function(){
  $("div").animate({
    left: '250px',
    height: '+=150px',
    width: '+=150px'
  });
});
기본 예시
예제 보기

animate() – 미리 정의된 값 사용

속성의 애니메이션 값을 “show”, “hide” 또는 “toggle” 로 지정할 수 있다.

예제
$("button").click(function(){
  $("div").animate({
    height: 'toggle'
  });
});
기본 예시
예제 보기

animate() – 대기열 기능 사용

기본적으로 jQuery에는 애니메이션용 대기열 기능이 함께 제공된다.

즉, 여러 animate()호출을 차례로 작성하면 jQuery는 이러한 메서드 호출을 사용하여 “내부” 대기열을 생성한다.
그런 다음 애니메이션 호출을 하나씩 실행한다.

따라서 서로 다른 애니메이션을 차례로 수행하려는 경우 대기열 기능을 활용한다.

예제 1
$("button").click(function(){
  var div = $("div");
  div.animate({height: '300px', opacity: '0.4'}, "slow");
  div.animate({width: '300px', opacity: '0.8'}, "slow");
  div.animate({height: '100px', opacity: '0.4'}, "slow");
  div.animate({width: '100px', opacity: '0.8'}, "slow");
}); 
기본 예시
예제 보기
예제 2
$("button").click(function(){
  var div = $("div");
  div.animate({left: '100px'}, "slow");
  div.animate({fontSize: '3em'}, "slow");
}); 
기본 예시
예제 보기
참고

Mingg`s Diary
밍구
공부 목적 블로그