jqueryアニメーションアニメーション効果の説明_jquery

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

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

// 1 つのアニメーションで 3 種類のエフェクトを同時に適用します
$("#go").click(function(){
$("#block").animate ({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
},
}); ;
animate( params, options )

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

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

$("#go1").click(function(){ $("#block1").animate( { width: "90%"} , { キュー: false 、期間: 5000 } ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000) ); (){ $( "#block2").animate( { width: "90%"}, 1000 ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000); );

stop( [clearQueue], [gotoEnd] )
指定された要素で実行されているすべてのアニメーションを停止します。
キュー内に実行を待機しているアニメーションがある場合 (かつ、clearQueue が true に設定されていない場合)、それらはすぐに実行されます。
clearQueue(Boolean): true に設定すると、キューはクリアされます。アニメーションはすぐに終了できます。
gotoEnd (ブール値): 現在実行中のアニメーションを即座に完了させ、表示と非表示の元のスタイルをリセットし、コールバック関数を呼び出します。
「Go」をクリックするとアニメーションが開始され、「Stop」をクリックすると現在の位置で停止します:

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

// アニメーションを開始 $("#go").click(function(){ $(".block").animate({left: ' 200px'} , 5000) }); // ボタンをクリックするとアニメーションを停止します $("#stop").click(function(){ $(".block").stop(); }); 🎜>