animate를 사용하여 jQuery에서 애니메이션을 사용자 정의하는 방법-JS 튜토리얼-php.cn

animate를 사용하여 jQuery에서 애니메이션을 사용자 정의하는 방법

高洛峰

풀어 주다： 2016-12-28 09:18:06

원래의

1344명이 탐색했습니다.

애니메이션 animate()

　01. animate() 메소드의 간단한 사용법

　 일부 복잡한 애니메이션은 이전에 배운 여러 애니메이션 함수로는 구현할 수 없는데, 이번에는 강력한 animate 메소드입니다. .

요소를 조작하여 3초 페이드인 애니메이션을 수행합니다. 두 애니메이션 설정 세트의 차이점을 비교해 보세요.

$(elem).fadeOut(3000)
$(elem).animate({
opacity:0
},3000)

로그인 후 복사

animate 방법이 더 유연하고 스타일 속성을 정확하게 제어하여 애니메이션을 수행할 수 있다는 것은 분명합니다.

구문:

1 .animate( 속성 [, 기간 ] [, 완화 ] [, 완료 ] )

2 .animate( 속성, 옵션 )

　.animate() 메서드를 사용하면 숫자 CSS 속성에 애니메이션을 만들 수 있습니다. 두 구문은 거의 동일합니다. 필요한 속성은 CSS 속성 키-값 쌍 세트입니다. 이 속성 집합은 속성 범위가 더 제한된다는 점을 제외하면 .css() 메서드를 설정하는 데 사용되는 속성 키-값 쌍과 유사합니다. 이제 두 번째 매개변수를 개별적으로 전달하거나 하나의 객체로 결합할 수 있습니다.

매개변수 분해:

속성: 하나 이상의 CSS 속성의 키-값 쌍으로 구성된 객체 개체입니다. 달리 명시하지 않는 한 애니메이션에 사용되는 모든 속성은 숫자여야 한다는 점을 기억하는 것이 중요합니다. 이러한 속성은 숫자가 아닌 경우 기본 jQuery 기능을 사용할 수 없습니다. 예를 들어, 일반적인 것, 테두리, 여백, 패딩, 너비, 높이, 글꼴, 왼쪽, 위쪽, 오른쪽, 아래쪽, wordSpacing 등은 모두 애니메이션 효과를 생성할 수 있습니다. 매개변수가 플러그인에 매우 유용한 빨간색 또는 GBG와 같은 값이기 때문에 배경색은 분명히 불가능합니다. 그렇지 않으면 일반적인 상황에서 애니메이션 효과를 얻을 수 없습니다. CSS 스타일은 CSS 이름(예: "font-size")이 아닌 DOM 이름(예: "fontSize")을 사용하여 설정됩니다.

단위에 특히 주의하세요. 별도로 명시하지 않는 한 속성 값의 단위는 픽셀(px)입니다. 단위 em 및 %는

.animate({
left: ,
width: &#39;px&#39;
opacity: &#39;show&#39;,
fontSize: "em",
}, );

로그인 후 복사

을 사용하여 지정해야 합니다. 값을 정의하는 것 외에도 각 속성은 'show', 'hide' 및 '비녀장'. 이러한 단축키를 사용하면 사용자 지정 숨기기 및 표시 애니메이션을 통해 요소의 표시 또는 숨기기를 제어할 수 있습니다.

.animate({
width: "toggle"
});

로그인 후 복사

+= 또는 -=로 시작하는 값이 제공되는 경우, 그런 다음 이 속성

.animate({
left: &#39;+50px&#39;
}, "slow");

로그인 후 복사

duration: time

의 현재 값에서 주어진 숫자를 더하거나 빼서 목표 값이 계산됩니다. 애니메이션 실행 시간은 밀리초 단위입니다. 값이 클수록 애니메이션 실행이 느려지는 것이지 빨라지는 것은 아닙니다. 각각 200밀리초와 600밀리초의 지속 시간을 나타내는 '빠른' 문자열과 '느린' 문자열을 제공할 수도 있습니다.
애니메이션 움직임을 완화하는 알고리즘:

스윙 호출 시 jQuery 라이브러리가 기본입니다. 일정한 속도로 애니메이션을 실행하려면 다른 애니메이션 알고리즘이 필요하면 관련 플러그인

완전 콜백

을 찾아보세요. 현재 애니메이션이 결정됩니다. 완료 후

02.animate() 메서드를 실행하여 여러 애니메이션을 순차적으로 실행합니다.

animate 애니메이션을 실행할 때 일부 실행을 관찰해야 하는 경우 애니메이션의 조건 또는 애니메이션 도중 진행 중인 특정 순간에 다른 처리를 수행하기 위해 animate를 사용하여 두 번째 설정 구문을 제공하고 객체 매개변수를 전달하고 애니메이션 실행 상태에 대한 알림을 받을 수 있습니다.

.animate( 속성, 옵션 )

옵션 매개변수

duration - 애니메이션 실행 시간 설정
easing - 사용할 이징 함수를 지정합니다. Easing 함수 사용
step: 각 애니메이션의 각 단계가 완료된 후 실행될 함수를 규정합니다.
progress: 이 콜백은 애니메이션이 호출될 때마다 실행되며, 이는 진행의 개념입니다.
complete: 애니메이션 완료 시 콜백

여러 요소가 애니메이션되는 경우 콜백은 전체 애니메이션에 대해 한 번이 아니라 일치하는 각 요소에 대해 한 번 실행됩니다.

공통 메서드 나열

$(&#39;#elem&#39;).animate({
width: &#39;toggle&#39;,
height: &#39;toggle&#39;
}, {
duration: ,
specialEasing: {
width: &#39;linear&#39;,
height: &#39;easeOutBounce&#39;
},
complete: function() {
$(this).after(&#39;<div>Animation complete.</div>&#39;);
}
});

로그인 후 복사

사용자 정의 애니메이션 효과를 생성하려면 animate() 메서드를 호출하세요. 호출 형식은 다음과 같습니다.

$(selector).animate({params},speed , [콜백])

그 중 params 매개변수는 애니메이션 효과를 생성하는 데 사용되는 CSS 속성의 이름과 값이고, speed 매개변수는 애니메이션 효과의 속도(밀리초), 선택적 콜백 매개변수는 애니메이션이 완료되면 실행됩니다. 콜백 함수 이름입니다.

예를 들어 animate() 메소드를 호출하면 아래와 같이 작은 크기부터 큰 크기까지 애니메이션 효과로 이미지를 표시할 수 있습니다.

<body>
<h>制作简单的动画效果</h>
<img src="images/.png" alt=""/>
<div id="tip"></div>
<script type="text/javascript">
$(function() {
$(&#39;img&#39;).animate({
width: &#39;px&#39;;
height:&#39;px&#39;
}, , function() {
$("#tip").html(&#39;执行完成！&#39;);
});
})
</script>
</body>

로그인 후 복사

브라우저에 표시되는 효과:

animate를 사용하여 jQuery에서 애니메이션을 사용자 정의하는 방법