jQuery 효과 - 애니메이션
- 이전 페이지 jQuery 슬라이드
- 다음 페이지 jQuery stop()
jQuery animate() 메서드는 사용자 정의 애니메이션을 생성할 수 있도록 합니다.
효과 시연
jQuery 애니메이션 - animate() 메서드
jQuery animate() 메서드는 사용자 정의 애니메이션을 생성합니다.
문법:
$(선택자).animate({params},speed,callback);
필수 params 파라미터는 애니메이션을 형성하는 CSS 속성을 정의합니다.
선택 사항 speed 파라미터는 효과의 지속 시간을 정의합니다. 다음 값 중 하나를 사용할 수 있습니다: "slow", "fast" 또는 밀리초.
선택 사항 callback 파라미터는 애니메이션이 완료된 후 실행할 함수 이름입니다.
아래 예제는 animate() 메서드의 간단한 사용법을 보여줍니다; 이는 <div> 요소를 왼쪽으로 이동시키고, left 속성이 250픽셀까지 이동하는까지입니다:
예제
$("button").click(function(){
$("div").animate({left:'250px'});
});
ヒント:기본적으로 모든 HTML 요소는 정적 위치를 가지고 있으며, 이동할 수 없습니다.
위치를操作할 때는, 먼저 요소의 CSS position 속성을 relative, fixed 또는 absolute로 설정해야 합니다!
jQuery animate() - 여러 속성을操作
애니메이션 생성 중 여러 속성을 동시에 사용할 수 있습니다:
예제
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
ヒント:animate() 메서드를 통해 모든 CSS 속성을操作할 수 있습니까?
네, 거의 가능합니다! 하지만, 기억해야 할 중요한 일이 하나 있습니다: animate()를 사용할 때, 모든 속성 이름을 Camel 표기법으로 작성해야 합니다. 예를 들어, padding-left 대신 paddingLeft, margin-right 대신 marginRight와 같이 사용해야 합니다.
또한, 색상 애니메이션은 핵심 jQuery 라이브러리에 포함되어 있지 않습니다.
색상 애니메이션을 생성하려면 jQuery.com에서 Color Animations 플러그인을 다운로드해야 합니다.
jQuery animate() - 상대적인 값 사용
귀하는 상대적인 값을 정의할 수도 있습니다(이 값은 요소의 현재 값에 상대적입니다). 값 앞에 += 또는 -=를 추가해야 합니다:
예제
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
jQuery animate() - предопределенные значения использования
귀하는 속성의 애니메이션 값을 "show"、"hide" 또는 "toggle"로 설정할 수 있습니다:
예제
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
jQuery animate() - 퀼리트 기능 사용
기본적으로, jQuery는 애니메이션에 대한 퀼리트 기능을 제공합니다.
이는 여러개의 animate() 호출을 서로 다음에 작성하면, jQuery가 이러한 메서드 호출을 포함한 '내부' 퀼리트를 생성한다는 것을 의미합니다. 그런 다음 이러한 animate 호출을 차례대로 실행합니다.
예제 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
아래의 예제는 <div> 요소를 오른쪽으로 이동하고 텍스트의 크기를 증가시킵니다:
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
- 이전 페이지 jQuery 슬라이드
- 다음 페이지 jQuery stop()
