jQuery 효과 - 애니메이션

jQuery는 사용자 정의 애니메이션을 생성할 수 있도록 허용합니다

jQuery 애니메이션-animate() 메서드

jQuery animate()CSS 속성 집합에 대해 사용자 정의 애니메이션을 실행하는 메서드입니다

이는animate()메서드 문법:

$(selector).animate({styles},　duration,　easing,　callback)

매개변수:

• {styles} -애니메이션이 이동할 CSS 속성과 값을 가진 객체를 지정합니다

• duration -애니메이션 효과가 얼마나 오래 실행될지 결정합니다. 가능한 값: "slow", "fast" 또는 밀리초

• easing -전환에 사용할缓动 기능을 지정합니다. 가능한 값: "swing", "linear"

• callback-animate() 메서드가 완료된 후 호출할 함수를 지정합니다

다음 예제에서는 요소의 너비를 변경하여 요소에 애니메이션을 설정합니다：

$("button").click(function(){
　　$("div").animate({width:　"500px"});
});

다음 예제는 요소의 위치를 변경하여 요소에 애니메이션을 적용합니다:

$("button").click(function(){
　　$("div").animate({left: "500px"});
});

jQuery animate()-여러 속성 설정

우리는 동시에 요소의 여러 속성에 애니메이션을 설정할 수도 있습니다.

$("button").click(function(){
　　$("div").animate({
　　　　width: "500px",
　　　　height: "400px",
　　　　opacity: "0.3,
　　　　left: "50px"
　　});
});

다음 예제는 animate()를 사용하여 다음을 보여줍니다:duration과easing매개변수:

$("button").click(function(){
　　$("div").animate({
　　　　width: "500px",
　　　　height: "400px"
　　},　4000, "linear");
});

다음 예제는 animate()를 사용하여 다음을 보여줍니다:콜백매개변수:

$("button").click(function(){
　　$("div").animate({
　　　　width: "500px",
　　　　height: "400px"
　　},　500, "linear",
　　function() {
　　　　$(this).after("<h2>애니메이션이 완료되었습니다</2">
　　});
});

jQuery animate()-큐 애니메이션 사용

기본적으로 jQuery는 애니메이션 큐 기능을 제공합니다.

큐에서는 하나나 여러 가지 함수가 실행을 기다립니다.

이렇게 되면 여러 개의 animate() 호출을 연달아 작성하면 jQuery는 이를 "내부" 큐로 생성하고, 그 다음 하나씩 애니메이션 호출을 실행합니다.

다음 예제는 DIV 요소의 너비를 먼저 변경한 후 높이를 변경하고, 그 다음 텍스트의 폰트 크기를 증가시킵니다:

$("button").click(function(){
　　let div = $("div");
　　div.animate({width: "500px"});
　　div.animate({height: "200px"});
　　div.animate({fontSize: "10em"});
});

우리는 jQuery의 링크 기능을 사용하여 여러 가지 속성을 동시에 애니메이션 한 요소를 순차적으로 애니메이션 할 수 있습니다.

$("button").click(function(){
　　$("div")
　　　　.animate({width: "500px"})
　　　　.animate({height: "200px"})
　　　　.animate({fontSize: "10em"})
　　　　.animate({opacity: 0.3});
});

당신은 이 강의의 후반부에서 링크에 대한更多信息를 배울 것입니다.

jQuery animate()-relative values

The animation property can also be relative. If a leading+=-char sequence, then the target value is calculated by adding or subtracting the given number from the current value of the attribute.

$("p").click(function(){
　　$(this).animate({
　　　　fontSize: "+=5px",
　　　　padding "+=10px"
　　});
});

jQuery animate()-предопределенные значения

또한, 속성의 애니메이션 값을 "show", "hide" 또는 "toggle"로 지정할 수 있습니다:

$("button").click(function(){
　　$("div").animate({height: "toggle"});
});

jQuery 효과 참조

완전한 효과 참조에 대해 방문해 주세요jQuery 효과 참조 매뉴얼。