Animation

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

animate() 메서드

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

형식

$(selector).animate({params},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

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기