Jqueryカスタムアニメーションの概要とexamples_jquery

animate(params, options) 戻り値:jQuery
概要
カスタムアニメーションを作成するために使用される関数。
この関数の重要な点は、アニメーション フォームと結果のスタイル属性オブジェクトを指定することです。このオブジェクトの各プロパティは、変更できるスタイル プロパティ (「高さ」、「上部」、「不透明度」など) を表します。注: 指定されたすべての属性は、margin-left ではなく marginLeft など、キャメル形式である必要があります。
各属性の値は、アニメーション終了時のこのスタイル属性の長さを示します。数値の場合、スタイル プロパティは現在の値から指定された値までグラデーションになります。 「非表示」、「表示」、または「切り替え」などの文字列値が使用される場合、そのプロパティに対してデフォルトのアニメーション フォームが呼び出されます。
jQuery 1.2 では、em 単位と % 単位を使用できます。さらに、jQuery 1.2 では、属性値の前に「=」または「-=」を指定することで、要素を相互に相対的に移動させることができます。

Parameters
paramsOptions
アニメーション化されたプロパティと最終値としてスタイル属性とその値を含むセット
optionsOptions
アニメーション オプションを含むセット値の集合。

Options
durationString,Number
(デフォルト: "normal") あらかじめ決められた 3 つの速度 ("slow"、"normal"、または "fast") のいずれかの文字列) またはアニメーションの継続時間を示すミリ秒の値 (例: 1000)
easingString
(デフォルト: "swing") 使用する消去効果の名前 (デフォルトでは jQuery が提供します)。
completeFunction
アニメーションの完了時に実行される関数
stepCallback
queueBoolean
(デフォルト: true) これを false に設定すると、このアニメーションがアニメーションに入らなくなります。 queue (jQuery New in 1.2)

例
説明:
最初のボタンが押された後、キューにないアニメーションが表示されます。 div が 90% に拡大されると、フォントも増加します。フォントが変更されると、境界線のアニメーションが開始されます。
HTML コード:

コードをコピー コードは次のとおりです:

» ブロック 1 をアニメーション化
>> ブロック 2 をアニメーション化 "> ブロック 1

ブロック 2

jQuery コード:
$("#go1").click(function(){
$("# block1") .animate( { width: "90%"}, { queue: false, period: 5000 } )
.animate( { fontSize: '10em' } , 1000 )
.animate( { borderWidth: 5 }, 1000);
});
$("#go2").click(function(){
$("#block2").animate( { width: "90%"} , 1000 )
.animate( { fontSize: '10em' } , 1000 )
.animate( { borderWidth: 5 },
}); 🎜>説明
:
2 番目のボタンを押すと、従来のチェーン アニメーションになります。つまり、前のアニメーションが完了するまで次のアニメーションは開始されません。

HTML コード :

コードをコピー

コードは次のとおりです: » ブロック 1 をアニメーション化 >> ブロック 2 をアニメーション化

ブロック 1

div id="block2" >Block2

jQuery コード: