jQuery Animate 심층학습(1)

이 기사에서는 jQuery(1)의 Animate에 대한 심층적인 연구를 제공하므로 jQuery에서 animate의 사용법을 더 잘 이해할 수 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

jQuery에서 animate의 사용법에 대해 얼마나 알고 있나요? 단순한 위치 이동이라면 보여주고 숨기고, 오! 맙소사, 자원을 낭비하고 계시군요! animate는 매우 강력하기 때문에 예상치 못한 다양한 방법으로 사용할 수 있습니다! 함께 공부해 봅시다. [추천 관련 동영상 튜토리얼: jQuery 튜토리얼]

먼저 jQuery API에서 animate의 상세한 사용법을 이해해야 합니다.

animate: jQuery 개체를 반환합니다

animate( properties [, duration ] [, easing ] [, complete ] )

설명: CSS 속성 집합을 기반으로 사용자 정의 애니메이션을 수행합니다.

1. 애니메이션( 속성 [, 기간 ] [, 완화 ] [, 완료 ] )

1. Properties

유형: PlainObject

CSS 속성 및 값의 개체입니다. 애니메이션은 이 개체 집합에 따라 움직입니다.

2. 기간(기본값: 400)

유형: 숫자 또는 문자열

문자열 또는 숫자는 애니메이션이 실행되는 기간을 결정합니다. (기본값: "normal", 문자열 "slow", "normal" 또는 애니메이션 기간을 나타내는 "fast" 또는 밀리초 값(예: 1000))

3 easing(기본값: Swing)

유형: 문자열

전환에 사용할 여유 함수를 나타내는 문자열입니다. (jQuery 자체적으로 "linear", "swing" 제공)

4.complete

Type: Function()

애니메이션이 완료되면 실행되는 함수입니다.

2. 애니메이션(속성, 옵션)

1. Properties

Type: PlainObject

CSS 속성 및 값의 개체입니다. 애니메이션은 이 개체 집합에 따라 움직입니다.

2, options

Type: PlainObject

애니메이션 옵션이 포함된 값 집합입니다. 지원되는 옵션:

1) 기간(기본값: 400)

유형: 숫자 또는 문자열

문자열 또는 숫자에 따라 애니메이션이 실행되는 시간이 결정됩니다. (Fool's Pier 참고: 기본값: "normal", 미리 결정된 3개의 속도 문자열("느림", "보통" 또는 "빠름") 또는 애니메이션 지속 시간을 나타내는 밀리초 값(예: 1000))

2) , easing (기본값: Swing)

Type: String

전환에 사용할 여유 기능을 나타내는 문자열입니다. (Fol's Wharf 참고 사항: jQuery 자체는 "선형" 및 "스윙"을 제공하며 다른 효과는 jQuery Easing 플러그인을 사용할 수 있습니다.)

3), queue(기본값: true)

유형: 부울 또는 문자열

a 애니메이션을 효과 대기열에 배치할지 여부를 나타내는 부울 값입니다. false인 경우 애니메이션이 즉시 시작됩니다. jQuery 1.7부터 대기열 옵션은 문자열을 허용할 수도 있으며, 이 경우 해당 문자열로 표시되는 대기열에 애니메이션이 추가됩니다. 사용자 정의 대기열 이름이 사용되면 애니메이션이 자동으로 시작되지 않습니다. 애니메이션을 시작하려면 .dequeue("queuename")을 호출해야 합니다.

4), SpecialEasing

유형: PlainObject

이 메소드의 첫 번째 매개변수 속성으로 정의된 하나 이상의 CSS 속성과 해당 여유 함수로 구성된 키-값 쌍 맵. (1.4의 새로운 기능)

5), step

Type: Function(현재 번호, Tween tween)

각 애니메이션 요소의 각 애니메이션 속성에 대해 호출될 함수입니다. 이 기능은 Tween 객체를 수정하여 설정의 속성 값을 변경할 수 있는 기회를 제공합니다.

6), progress

Type: Function( Promise animation, Number Progress, Number 남은 Ms )

애니메이션 속성이 아무리 많아도 각 애니메이션 요소마다 애니메이션의 각 단계가 완료된 후에 호출되는 함수입니다. 기능은 별도로 실행됩니다. (버전 추가: 1.8)

7),complete

Type: Function()

애니메이션이 완료되면 실행되는 함수입니다.

8), done

Type: Function( Promise animation, Boolean jumpedToEnd )

애니메이션이 완료되면 실행되는 함수입니다. (Promise 객체 상태가 완료되었습니다.) (버전 추가: 1.8)

9), failure

Type: Function( Promise animation, Boolean jumpedToEnd )

애니메이션 완료에 실패했을 때 실행되는 함수입니다. (그의 Promise 객체 상태는 완료되지 않았습니다). (버전 추가: 1.8)

10), Always

Type: Function( Promise animation, Boolean jumpedToEnd )

애니메이션이 완료되면 실행되거나, 완료되지 않으면 중지되는 함수입니다. (그의 Promise 객체 상태는 완료 또는 불완전입니다.) (버전 추가: 1.8)

일부 기본 애플리케이션의 경우 jQuery API 또는 jQuery API 중국어를 참조할 수 있습니다.

주황색 부분이 제가 이 글에서 집중적으로 다루고 싶은 부분이에요!

PlainObject

PlainObject类型，是Javascript对象包含0个或者跟多键值对。换句话说，PlainObject也是Object对象。但在jQuery文档中，被设计是为了区分其他多种Javascript对象。如null,用户自定义的数组，或者是主机对象向如document,typeof 值都是 “object”。通过jQuery.isPlainObject()方法来判断传入的的参数是否是PlainObject.

var a = [];
var d = document;
var o = {};
 
typeof a; // object
typeof d; // object
typeof o; // object
 
jQuery.isPlainObject( a ); // false
jQuery.isPlainObject( d ); // false
jQuery.isPlainObject( o ); // true

queue

一个布尔值，指示是否将动画放置在效果队列中。如果为false时，将立即开始动画。

它是来决定不同动画进行的顺序。

$( "#block1" ).animate( { width: "90%" }, { queue: false, duration: 3000 })
     .animate({ fontSize: "24px" }, 1500 )
     .animate({ borderRightWidth: "15px" }, 1500 );
 $( "#block2" ).animate({ width: "90%" }, 1000 )
     .animate({ fontSize: "24px" }, 1000 )
     .animate({ borderLeftWidth: "15px" }, 1000 );

#block1要执行的动画中，使用了 queue: false 选项，该动画使元素的宽度扩大到了总宽 90%,并且 文字大小也变大了。一旦字体大小改变完了，边框的动画就会开始。注意到是并且了吗？是同时进行的~~

#block2要执行的动画中，包含了一系列动画，当前一个动画完成时，后一个动画就会开始。

关于 step 就留到下次在讲解吧！

위 내용은 jQuery Animate 심층학습(1)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!