코어 포인트
jQuery의 메소드는 지정된 기간 동안 요소의 CSS 속성을 점차적으로 변경하여 개발자가 사용자 정의 애니메이션을 만들 수있는 다재다능한 도구입니다.
animate() 방법은 수치 CSS 속성에만 적합하며 성능 문제가 발생할 수 있기 때문에 매우 복잡한 애니메이션에 적합하지 않습니다.
메소드는 주로 두 가지 형태의 형태로 제공되며 대부분의 매개 변수는 선택 사항입니다. 이 매개 변수는 지속 시간, 완화 기능 및 애니메이션이 완료된 후 발생하는 일과 같은 애니메이션의 측면을 제어합니다.
개발자는 여러 animate() 메소드를 함께 연결하여보다 복잡한 애니메이션을 만들 수있어 애니메이션 시퀀스를 통화 순서대로 실행할 수 있습니다. 이 기능을 "큐잉"이라고하며 jQuery 애니메이션의 기능과 유연성을 향상시킵니다.
jQuery는 수천 명의 개발자가 수년 동안 프로젝트를 처리하는 방식을 변경 한 훌륭한 라이브러리입니다. jQuery를 만들 때 CSS는 복잡한 애니메이션을 만들 수 없으며 JavaScript 만 사용할 수 있습니다. jQuery는이 목적을 위해 몇 가지 방법이 만들어 졌기 때문에 애니메이션에 큰 도움이됩니다. 간단한 애니메이션 (, animate(properties[, duration][, easing][, callback]), animate(properties[, options]) 등)과 함께 제공되지만 가볍게 유지하기 위해 라이브러리는 애니메이션을 만들 수있는 매우 유연한 방법을 제공합니다. 이것은이 기사의 주제입니다. jQuery 's 는 이며, 이는 jQuery에 의해 래핑 된 이전에 선택된 DOM 요소 세트에서 작동한다는 것을 의미합니다. 이 방법을 사용하면 자신의 사용자 정의 애니메이션 효과를 컬렉션의 요소에 적용 할 수 있습니다. 이를 위해서는 애니메이션 끝에 도달 할 CSS 스타일 속성과 값을 제공해야합니다. 애니메이션 효과 (애니메이션 엔진에 의해 자동으로 처리되는) 동안 스타일의 중간 값은 효과 지속 시간 및 완화 기능에 의해 결정되며, 곧 논의 할 것입니다. 애니메이션 할 수있는 CSS 스타일 속성 목록은 숫자 값을 수용하는 속성으로 제한됩니다. 이 값은 절대 값 (예 : 200) 또는 출발점에서 상대 값일 수 있습니다. 절대 값의 경우 jQuery는 픽셀이 기본 장치라고 가정합니다. EM, REM 또는 백분율과 같은 다른 단위를 지정할 수도 있습니다. 상대 값을 지정하려면 각각 양수 또는 음의 방향으로 상대 목표 값을 나타내려면 또는 를 서문해야합니다. 이제 우리는 animate()에 대한 이해를 얻었으므로 이제 서명과 매개 변수를 볼 차례입니다.
서명 및 매개 변수
이 방법에는 두 가지 주요 형태가 있으며, 대부분의 매개 변수는 선택 사항입니다 (일반적인 정사각형 괄호로 표시) :
animate(properties[, duration][, easing][, callback])
animate(properties[, options])
매개 변수에 대해 할 말이 많습니다
(개체) : 애니메이션 끝에 도달 해야하는 값이 포함 된 해시 테이블.
(숫자 | 문자열) : 효과 지속 시간 (밀리 초) 또는 사전 정의 된 문자열 중 하나 : "느린"(600 밀리 초), "정상"(400 밀리 초) 또는 "빠른"(200ms). 기본값은 "정상"입니다.
(문자열) : 변환을 수행 할 때 사용할 완화 함수의 이름입니다. 기본값은 "스윙"입니다.
(함수) : 각 애니메이션 요소에 애니메이션 할 때 실행되는 함수.
(개체) : 메소드로 전달할 옵션 세트가 포함 된 해시 테이블. 사용 가능한 옵션은 다음과 같습니다. properties
(함수) : 애니메이션이 완료되거나 중지되었지만 완료되지 않은 경우 호출되는 함수.
(함수) : 애니메이션이 완료된 후 실행 된 기능.
(함수) : 애니메이션이 완료된 후 호출 된 함수가 완료됩니다. duration
(문자열 | 번호) : 위에서 설명한 것과 동일합니다.
(문자열) : 위에서 설명한 것과 동일합니다.
(함수) : 애니메이션이 실패 할 때 실행 된 기능. easing
(함수) : 애니메이션의 각 단계 후에 실행되는 함수. 이 기능은 애니메이션 요소 당 한 번만 호출됩니다.
(Bolean) : 애니메이션을 효과 대기열에 배치 해야하는 경우 (나중에 자세히 설명). 기본값은 참입니다. callback
(개체) : 값이 완화 함수 인 하나 이상의 CSS 속성의 해시 테이블.
(함수) : 애니메이션의 시작 부분에서 실행 된 함수.
(function) : 각 애니메이션 요소의 각 애니메이션 속성을 호출하는 함수. options
always
easy complete라는 용어는 프레임 속도가 처리되고 애니메이션되는 방식을 설명하는 데 사용됩니다. 의 가능성을 경험할 수 있도록 이러한 매개 변수의 실질적인 응용 프로그램을 보여줄 것입니다.
done 예제 사용
이 섹션에서는 의 힘을 만들기위한 시연을 만들 것입니다. 이 접근법은 애니메이션의 성능 및 유창성과 관련된 문제로 인해 매우 복잡한 애니메이션에 적합하지 않다는 것을 기억하십시오. duration
단일 애니메이션을 실행하십시오
단일 애니메이션을 실행하는 것은 매우 쉽습니다. 메소드를 한 번 호출하십시오. 예를 들어, 우리는 요소를 상자의 한쪽에서 다른쪽으로 이동할 수 있습니다. 이 애니메이션을 설명하기 위해 하나는 다른 하나의 DIV 요소를 설정합니다. 우리는 내부 Div에 빨간 배경을 가지도록 스타일을 지정할 것입니다. 이를 수행하는 코드는 다음과 같습니다. html : <code class="language-html"><div class="rectangle">
<div class="square-small"></div>
</div></code>
<:> css :
의 힘을 사용하여, 우리는 작은 사각형을 한쪽에서 다른쪽으로 움직입니다.
이 코드에서는 <code class="language-css">.rectangle {
width: 300px;
height: 20px;
display: block;
position: relative;
border: 1px solid black;
margin: 20px 0;
}
.square-small {
display: block;
width: 20px;
height: 20px;
position: absolute;
background-color: red;
}</code> 속성이 애니메이션 될 유일한 속성임을 지정합니다. 우리는 애니메이션 지속 시간을 사전 설정 값으로 느리게 설정했습니다 (600 밀리 초). 우리는 절대 값을 사용하여 내부 (클래스 )를 이동합니다. 이 값은 이전에 나열된 CSS 코드로 설정 한 컨테이너 너비를 기반으로합니다. 이 솔루션은 컨테이너의 너비를 변경하면 내부 animate()가 상대방에 도달하지 않기 때문에 (컨테이너에 더 넓은 너비를 설정하는 경우) 너비를 초과하는 경우 ). 한 가지 해결책은 아래와 같이 외부 및 내부 의 전류 너비 계산을 기반으로
<code class="language-javascript">$('.rectangle')
.find('.square-small')
.animate({
left: 280
}, 'slow');</code> 속성의 값을 설정하는 것입니다.
루프 에서 여러 애니메이션을 실행하십시오
하나의 요소 또는 요소 그룹에서 여러 애니메이션을 실행하는 것은 호출을 에 연결하는 것만 큼 쉽습니다. 이 예에서, 우리는 작은 사각형을 움직일 때 작은 사각형을 움직일 것입니다. 이 데모를 만들려면 다음 태그를 사용합니다.
left
스타일의 경우 <div>에 사용한 동일한 CS와 다음 스타일을 사용하여 가장 바깥 사각형의 스타일을 설정해야합니다.
<code>.square-small
마지막 단계는 이상적인 모래 시계 주변을 구성하는 네 줄을 그리기 위해 JavaScript 코드를 작성하는 것입니다. 가장 바깥 사각형의 왼쪽 상단에서 시작하여 작은 사각형의 오른쪽 아래쪽 모서리에 도달 할 때까지 작은 사각형을 애니메이션해야합니다. 작은 사각형은 효과를 생성하기 위해 대각선으로 움직여야합니다. 오른쪽 하단에 도달하면 왼쪽 하단으로 이동해야합니다. 그런 다음 오른쪽 상단에 도달하여 마침내 원래 위치로 돌아와야합니다. 이 데모를 소개 할 때 우리는 무한 애니메이션을 수행하고 싶다고 말했습니다. 따라서 마지막 단계가 완료되면 전체 애니메이션을 다시 실행하는 방법을 찾아야합니다. 이를 위해, 우리는 호출을 하나의 함수로 연결된 4 개의 <div> 호출로 랩핑 할 수 있으므로 참조 할 기능이 있습니다. 그런 다음 전술 한 <code><div> 콜백 및 iife를 사용하여 마지막 단계가 완료되면 애니메이션을 다시 실행할 수 있습니다. 이 설명을 코드로 변환 한 결과는 다음과 같습니다.
<code>left
위 코드에서 를 호출 할 때 동일한 매개 변수를 반복해서 쓰지 않도록 변수를 사용하는 방법에 유의하십시오. 또한 를 마지막으로 사용했을 때 <pre class="brush:php;toolbar:false"><code class="language-javascript">left: $('.rectangle').width() - $('.rectangle').find('.square-small').width()</code></pre> 콜백을 추가해야했기 때문에 <h3> jQuery 방법을 사용했습니다. </h3>더 많은 콜백 작업
<example> 마지막 예제로서, 우리는 파라미터 (두 번째 양식의 두 번째 매개 변수)의 , 및 <p> 속성을 설정합니다. 목적은 애니메이션이 실행되는 동안 클릭하면 애니메이션을 실행하는 버튼을 비활성화하는 것입니다. 그 후, 우리는 애니메이션 완료의 백분율을 보여주고 싶습니다. 이 예에서는 첫 번째 데모를 수정합니다. 설명에 따르면, 우리는 백분율을 표시하기 위해 버튼과 요소 (스팬을 사용)를 추가해야합니다. 이 변경 사항은 다음 태그를 초래합니다
<code>options
우리는 더 많은 스타일을 추가 할 필요가 없으므로 JavaScript 코드에 대한 토론으로 이동할 수 있습니다. 버튼을 클릭 할 때만 애니메이션을 실행하려면 버튼의 클릭 이벤트에 핸들러를 추가해야합니다. 핸들러 내부에서는 jQuery의 start 메소드를 사용하여 애니메이션이 실행 중인지 또는 완료되었는지에 따라 버튼을 비활성화하고 활성화합니다. 마지막으로, 우리는 애니메이션 완료의 백분율을 표시하기 위해 complete
결론 progress
이 기사에서는 <code class="language-html"><div class="rectangle">
<div class="square-small"></div>
</div></code> jQuery 방법으로 무엇을 할 수 있는지 논의합니다. 서명과 허용 된 매개 변수를 소개합니다. 이 기사에서는 세 가지 예제 애니메이션을 탐색합니다. 이 기사는 의 가능성을 간단히 소개합니다. 사실, 약간의 인내와 창의성으로 우리는 진정으로 복잡하고 아름다운 애니메이션을 만들 수 있습니다. prop()
progress 자주 묻는 질문 (FAQ)
jQuery 애니메이션 방법은 무엇이며 어떻게 작동합니까? <code class="language-css">.rectangle {
width: 300px;
height: 20px;
display: block;
position: relative;
border: 1px solid black;
margin: 20px 0;
}
.square-small {
display: block;
width: 20px;
height: 20px;
position: absolute;
background-color: red;
}</code>
jQuery 애니메이션 방법은 사용자 정의 애니메이션을 만들 수있는 강력한 도구입니다. 요소의 CSS 속성을 점차적으로 변경하여 귀하가 지정한 기간을 변경하여 작동합니다. 모든 CSS 속성을 애니메이션 할 수 있지만 대신 와 같은 낙타 케이스를 사용하여 속성을 지정해야합니다. 애니메이션 방법을 사용하면 애니메이션의 속도를 제어하는 완화 기능과 애니메이션이 완료된 후 실행되는 콜백 기능을 지정할 수 있습니다.
jQuery 애니메이션을 중지하거나 일시 중지하는 방법?
jQuery는 애니메이션을 중지하기 위해 메소드를 제공합니다. 이 메소드는 선택한 요소에서 현재 실행중인 애니메이션을 중지합니다. 애니메이션을 일시 중지하려면 jQuery가 내장 방법을 제공하지 않기 때문에 조금 더 복잡해집니다. 그러나 플러그인을 사용하거나 애니메이션 진행 상황을 수동으로 제어하여 수행 할 수 있습니다. animate()
jQuery 애니메이션을 사용하여 여러 속성을 한 번에 처리 할 수 있습니까? animate()
예, jQuery 애니메이션 방법을 사용하여 한 번에 여러 CSS 속성을 애니메이션 할 수 있습니다.
객체에 애니메이션 할 모든 속성을 포함하면됩니다. 예를 들어, 요소의 너비와 높이를 동시에 애니메이션 할 수 있습니다. jQuery 애니메이션에서 단계 함수를 어떻게 사용합니까?
jQuery Animate의 단계 함수는 애니메이션의 모든 단계에서 실행되는 콜백 함수입니다. 이 함수는 두 가지 매개 변수를 전달합니다. 단계 함수를 사용하여 복잡한 애니메이션을 만들거나 애니메이션을 디버그 할 수 있습니다.
숫자가 아닌 CSS 속성에 jQuery 애니메이션을 사용할 수 있습니까?
아니요, jQuery 애니메이션 방법은 숫자 CSS 특성에만 적용됩니다. 색상이나 배경색과 같은 비 숫자 특성을 애니메이션하려고하면 작동하지 않습니다. 그러나 jQuery UI 또는 jQuery 색상과 같은 플러그인을 사용하여 이러한 특성을 애니메이션 할 수 있습니다. now
jQuery 애니메이션을 사용하여 애니메이션을 연결하는 방법은 무엇입니까? fx
여러 애니메이션 방법을 하나씩 호출하여 jQuery 애니메이션을 연결할 수 있습니다. jQuery는 통화 순서대로 애니메이션을 실행합니다. 이것을 "큐잉"이라고하며 jQuery 애니메이션의 강력한 기능입니다.
jQuery 애니메이션을 사용하여 슬라이딩 효과를 만들 수 있습니까?
예, jQuery 애니메이션 방법을 사용하여 슬라이딩 효과를 만들 수 있습니다. 요소의 높이 또는 너비를 애니메이션하여이를 수행 할 수 있습니다. 그러나 jQuery는
, 및 메소드도 제공하며 간단한 슬라이딩 효과 만 만들려면 사용하기가 더 쉽습니다.
내 jQuery 애니메이션을 더 매끄럽게 만드는 방법은 무엇입니까?
jQuery 애니메이션을 더 매끄럽게 만드는 방법에는 여러 가지가 있습니다. 한 가지 방법은 애니메이션의 속도를 제어하는 완화 기능을 사용하는 것입니다. 또 다른 접근법은 브라우저가 애니메이션을 최적화 할 수있는 메소드를 사용하는 것입니다. 또한 DOM 운영 수를 최소화하고 가능한 경우 CSS 변환을 사용하여 성능을 향상시킬 수 있습니다.
요소 세트에서 jQuery 애니메이션을 사용할 수 있습니까?
예, 요소 세트에서 jQuery 애니메이션 방법을 사용할 수 있습니다. 여러 요소가있는 jQuery 객체의 애니메이션 메소드를 호출하면 컬렉션의 모든 요소에 애니메이션이 적용됩니다.
당신은 속성에 애니메이션으로 jQuery 애니메이션 방법을 사용하여 페이드 효과를 만들 수 있습니다. 그러나 jQuery는 slideDown, slideUp 및 slideToggle 메소드도 제공하며 간단한 페이드 효과를 만들려면 사용하기가 더 쉽습니다.
