jQuery Animateを深く学ぶ(1)

この記事の内容は、jQuery での Animate の使い方を誰もがさらに理解できるように、jQuery での Animate の詳細な学習 (1) に関するものです。困っている友人は参考にしていただければ幸いです。

jQuery での animate の使用法についてどのくらい知っていますか?単純な位置の移動であれば、表示したり非表示にしたりして、おお！ああ、なんてことだ、資源を無駄にしているんだ！ animate は非常に強力なので、予想外のさまざまな方法で使用できます。一緒に勉強しましょう。 [関連ビデオチュートリアルの推奨事項: jQuery チュートリアル ]

まず、jQuery API での animate の詳細な使用法を理解する必要があります。

animate: jQuery オブジェクトを返します

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

説明: 一連の CSS プロパティに基づいてカスタム アニメーションを実行します。

1. animate( プロパティ [, 期間 ] [, イージング ] [, 完了 ] )

1. プロパティ

タイプ: PlainObject

CSS プロパティと値のオブジェクト。アニメーションはこのオブジェクトのグループに従って動きます。

2. 期間 (デフォルト: 400)

タイプ: 数値または文字列

文字列または数値によって、アニメーションの実行時間を決定します。 (デフォルト値: "normal"、文字列 "slow"、"normal"、または "fast"、またはアニメーションの継続時間を示すミリ秒の値 (例: 1000))

3. イージング (デフォルト: スイング)

タイプ: String

トランジションに使用するイージング関数を示す文字列。 (jQuery 自体が「リニア」と「スイング」を提供します)

4. complete

Type: Function()

アニメーションが完了したときに実行される関数。

2. アニメーション(プロパティ、オプション)

1. プロパティ

タイプ: PlainObject

CSS プロパティと値のオブジェクト。アニメーションはこのオブジェクトのグループに従って動きます。

2、options

Type: PlainObject

アニメーション オプションを含む値のセット。サポートされているオプション:

1)、継続時間 (デフォルト: 400)

タイプ: 数値または文字列

文字列または数値によって、アニメーションの実行時間を決定します。 (Fool's Pier 注: デフォルト値: "normal"、3 つの事前に設定された速度文字列 ("slow"、"normal"、または "fast")、またはアニメーションの継続時間を示すミリ秒の値 (例: 1000))

2)、イージング (デフォルト: スイング)

タイプ: String

トランジションに使用するイージング関数を示す文字列。 (Fool's Wharf からのメモ: jQuery 自体は「リニア」と「スイング」を提供し、他の効果には jQuery Easing Plugin を使用できます)

3)、queue (デフォルト: true)

Type: Boolean または String

アニメーションをエフェクト キューに配置するかどうかを示すブール値。 false の場合、アニメーションはすぐに開始されます。 jQuery 1.7 以降、キュー オプションは文字列も受け入れることができ、その場合、アニメーションはその文字列で表されるキューに追加されます。カスタム キュー名を使用すると、アニメーションは自動的に開始されません。アニメーションを開始するには、.dequeue("queuename") を呼び出す必要があります。

4)、specialEasing

Type: PlainObject

このメソッドの最初のパラメーター プロパティによって定義された 1 つ以上の CSS プロパティと、それらに対応するイージング関数キーのマップ値のペア。 (1.4 の新機能)

5),step

Type: Function(Number now, Tween tween)

Everyアニメーション化された要素のアニメーション化されたプロパティごとに呼び出される関数。この関数は、Tween オブジェクトを変更して設定のプロパティ値を変更する機会を提供します。

6）、進捗状況

タイプ: 関数(約束アニメーション、進捗数、残り数)

各ステップアニメーション完了時に呼び出される関数。アニメーション プロパティの数に関係なく、アニメーション化された要素ごとに個別の関数が実行されます。 (追加されたバージョン: 1.8)

7)、complete

Type: Function()

アニメーションが完了したときに実行される関数。

8)、done

Type: Function( Promise anime, Boolean JumpedToEnd )

アニメーションが完了したときに実行される関数。 (彼の Promise オブジェクトのステータスは完了しました) (追加されたバージョン: 1.8)

9)、fail

Type: Function(Promise アニメーション, Boolean JumpedToEnd )

アニメーションが失敗しました。完了時に実行される関数。 (彼の Promise オブジェクトのステータスは完了していません)。 (追加バージョン: 1.8)

10）、always

Type: Function( Promiseアニメーション, Boolean JumpedToEnd )

アニメーションが完了したときに実行、そうでない場合は停止します。完成した機能。 (彼の Promise オブジェクトのステータスは完了または不完全です)。 (追加バージョン: 1.8)

一部の基本的なアプリケーションについては、jQuery API または jQuery API Chinese を参照してください。

#オレンジ色の部分 # がこの記事で注目したい部分です。

プレーンオブジェクト

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 中国語 Web サイトの他の関連記事を参照してください。