jQuery animate () 방법에 대한 안내서

코어 포인트

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 :

    <div class="rectangle">
      <div class="square-small"></div>
    </div>

    <:> 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;
    }

    속성이 애니메이션 될 유일한 속성임을 지정합니다. 우리는 애니메이션 지속 시간을 사전 설정 값으로 느리게 설정했습니다 (600 밀리 초). 우리는 절대 값을 사용하여 내부

    (클래스 <🎜 🎜>)를 이동합니다. 이 값은 이전에 나열된 CSS 코드로 설정 한 컨테이너 너비를 기반으로합니다. 이 솔루션은 컨테이너의 너비를 변경하면 내부 animate()가 상대방에 도달하지 않기 때문에 (컨테이너에 더 넓은 너비를 설정하는 경우) 너비를 초과하는 경우 ). 한 가지 해결책은 아래와 같이 외부 및 내부 <🎜

    의 전류 너비 계산을 기반으로

    $('.rectangle')
      .find('.square-small')
      .animate({
        left: 280
      }, 'slow');

    속성의 값을 설정하는 것입니다.

    루프 <🎜 🎜>에서 여러 애니메이션을 실행하십시오 하나의 요소 또는 요소 그룹에서 여러 애니메이션을 실행하는 것은 호출을 <🎜 🎜>에 연결하는 것만 큼 쉽습니다. 이 예에서, 우리는 작은 사각형을 움직일 때 작은 사각형을 움직일 것입니다. 이 데모를 만들려면 다음 태그를 사용합니다. left 스타일의 경우 <div>에 사용한 동일한 CS와 다음 스타일을 사용하여 가장 바깥 사각형의 스타일을 설정해야합니다. .square-small 마지막 단계는 이상적인 모래 시계 주변을 구성하는 네 줄을 그리기 위해 JavaScript 코드를 작성하는 것입니다. 가장 바깥 사각형의 왼쪽 상단에서 시작하여 작은 사각형의 오른쪽 아래쪽 모서리에 도달 할 때까지 작은 사각형을 애니메이션해야합니다. 작은 사각형은 효과를 생성하기 위해 대각선으로 움직여야합니다. 오른쪽 하단에 도달하면 왼쪽 하단으로 이동해야합니다. 그런 다음 오른쪽 상단에 도달하여 마침내 원래 위치로 돌아와야합니다. 이 데모를 소개 할 때 우리는 무한 애니메이션을 수행하고 싶다고 말했습니다. 따라서 마지막 단계가 완료되면 전체 애니메이션을 다시 실행하는 방법을 찾아야합니다. 이를 위해, 우리는 호출을 하나의 함수로 연결된 4 개의 <div> 호출로 랩핑 할 수 있으므로 참조 할 기능이 있습니다. 그런 다음 전술 한 <div> 콜백 및 iife를 사용하여 마지막 단계가 완료되면 애니메이션을 다시 실행할 수 있습니다. 이 설명을 코드로 변환 한 결과는 다음과 같습니다. left 위 코드에서 <🎜 🎜>를 호출 할 때 동일한 매개 변수를 반복해서 쓰지 않도록 </p> 변수를 사용하는 방법에 유의하십시오. 또한 <🎜 🎜>를 마지막으로 사용했을 때 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>left: $('.rectangle').width() - $('.rectangle').find('.square-small').width()</pre><div class="contentsignin">로그인 후 복사</div></div> 콜백을 추가해야했기 때문에 <h3 id="jQuery-방법을-사용했습니다"> jQuery 방법을 사용했습니다. </h3>더 많은 콜백 작업 <🎜 <🎜 <h3> <example> 마지막 예제로서, 우리는 </h3> 파라미터 (두 번째 양식의 두 번째 매개 변수)의 <🎜 🎜>, <🎜 🎜> 및 <p> 속성을 ​​설정합니다. 목적은 애니메이션이 실행되는 동안 클릭하면 애니메이션을 실행하는 버튼을 비활성화하는 것입니다. 그 후, 우리는 애니메이션 완료의 백분율을 보여주고 싶습니다. 이 예에서는 첫 번째 데모를 수정합니다. 설명에 따르면, 우리는 백분율을 표시하기 위해 버튼과 요소 (스팬을 사용)를 추가해야합니다. 이 변경 사항은 다음 태그를 초래합니다 <code>options 우리는 더 많은 스타일을 추가 할 필요가 없으므로 JavaScript 코드에 대한 토론으로 이동할 수 있습니다. 버튼을 클릭 할 때만 애니메이션을 실행하려면 버튼의 클릭 이벤트에 핸들러를 추가해야합니다. 핸들러 내부에서는 jQuery의 start 메소드를 사용하여 애니메이션이 실행 중인지 또는 완료되었는지에 따라 버튼을 비활성화하고 활성화합니다. 마지막으로, 우리는 애니메이션 완료의 백분율을 표시하기 위해 <🎜 옵션 옵션에 첨부 된 핸들러에 전달 된 두 번째 매개 변수를 사용합니다. 생성 된 코드는 다음과 같습니다 complete <🎜 🎜> <<> 결론 progress

    이 기사에서는

    <div class="rectangle">
      <div class="square-small"></div>
    </div>

    jQuery 방법으로 무엇을 할 수 있는지 논의합니다. 서명과 허용 된 매개 변수를 소개합니다. 이 기사에서는 세 가지 예제 애니메이션을 탐색합니다. 이 기사는

    의 가능성을 간단히 소개합니다. 사실, 약간의 인내와 창의성으로 우리는 진정으로 복잡하고 아름다운 애니메이션을 만들 수 있습니다. prop() progress <<> 자주 묻는 질문 (FAQ) <🎜 🎜>

    jQuery 애니메이션 방법은 무엇이며 어떻게 작동합니까?

    .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;
    }

    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 애니메이션 방법을 사용하여 페이드 효과를 만들 수 있습니다. 그러나 jQuery는 slideDown, slideUp 및 slideToggle 메소드도 제공하며 간단한 페이드 효과를 만들려면 사용하기가 더 쉽습니다.

위 내용은 jQuery animate () 방법에 대한 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!