그림과 텍스트에 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>

8.easyInOutQuart

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 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!