그림과 텍스트에 jQuery animate easing을 사용하는 방법에 대한 자세한 설명

jQuery API 문서에서 알 수 있듯이 jQuery 사용자 정의 애니메이션 함수 .animate( 속성 [, 기간] [, 완화] [, 완료] )에는 4개의 매개변수가 있습니다.

• 속성: 집합 스타일 속성과 해당 값을 애니메이션 속성으로 포함하는 컬렉션 및 최종 값 ​​

• 기간(선택 사항): 애니메이션 실행 시간, 해당 값은 미리 정해진 세 가지 속도 중 하나의 문자열일 수 있습니다( "느리게", "보통" 또는 "빠르게") 또는 애니메이션 지속 시간을 나타내는 밀리초 값(예: 1000)

• easing(선택 사항): 전환 효과의 이름 사용됨(예: "선형" 또는 "스윙"

• 완료(선택 사항): 애니메이션이 완료될 때 실행되는 함수

이징 매개변수에는 기본적으로 두 가지 효과가 있습니다. " 선형" 및 "스윙", 더 많은 효과가 필요한 경우 플러그인 지원이 필요합니다. jQuery Easing 플러그인은 "easeOutExpo", "easeOutBounce" 등과 같은 30개 이상의 효과를 제공합니다. 여기를 클릭하면 데모 효과를 볼 수 있습니다. 아래에 설명된 대로 각 완화의 사용법과 각 완화의 곡선 다이어그램을 소개합니다.

jQuery easing 사용법

먼저 프로젝트에 특수 애니메이션 효과를 사용해야 한다면 jQuery 도입 후 jquery.easing.1.3.js를 도입해야 합니다. 5.easyInOutQuart

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

6.easyInCubic

8.easyInOutQuart

11. >13.easyOutQuint

15.easyInExpo
17.easyInOutExpo
19.easyInOutSine .easyInCirc
23.easyInOutCirc
25.easyOutElastic
27.easyInOutBack
30 .easyInBounce
31.easyOutBounce
32.easyInOutBounce

물론, 코드 중복을 줄이기 위해 일반적으로 불가능합니다. 1.3.js에서는 필요한 경우 전체 jquery.easing을 도입해야 합니다. 예를 들어 프로젝트에서 "easeOutExpo" 및 "easeOutBounce" 두 가지 효과만 사용하는 경우에는 필요한 몇 가지 easing만 넣을 수 있습니다. 다음 코드만 필요합니다.


봄과 같은 애니메이션 사용자 정의와 같은 완화 효과를 지정하려면 jQuery 사용자 정의 애니메이션 함수 animate를 사용하세요.


언급할 가치가 있습니다 jQuery 1.4 버전의 animate() 메서드는 각 속성에 대한 여유 메서드 지정을 지원하도록 확장되었습니다.


JQuery 내장 사용 SlideUp(), SlideDown() 등과 같은 애니메이션 함수를 사용하여 여유 효과를 지정하는 경우 다음 두 가지 방법을 사용할 수 있습니다.


jQuery 여유 다이어그램


다음 다이어그램을 보면 각 easing의 효과를 더 쉽게 이해할 수 있습니다.




위는 jQuery animate 사용 방법에 대해 편집자가 자세히 소개하는 관련 지식입니다. 질문이 있으시면 메시지를 남겨주시면 편집자가 시간 내에 답변해 드리겠습니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

jQuery animate easing 사용 방법에 대한 자세한 그래픽 및 텍스트 설명을 보려면 PHP 중국어 웹사이트를 참고하세요!