jQuery 基礎トレーニング

jQuery エフェクト

jQuery 操作方法

jQuery 過渡

jQuery Ajax

jQuery マiscellaneous

jQueryのリファレンスマニュアル

jQueryのHTML/CSSメソッド jQueryの効果メソッド

jQuery エフェクト animate() メソッド

jQueryの効果メソッド

animate()メソッドは、一連のCSS属性に対してカスタムアニメーションを実行します。

アニメーションは、CSSスタイル設定から別のCSSスタイル設定への过渡アニメーションを可能にします。

すべてのアニメーション属性は単一の数値（例えば、幅、高さまたは左）に設定されるべきです。

文字列「show」、「hide」および「toggle」以外の文字列値はアニメーション（例えば、背景色）に設定できません。これらの値はアニメーション要素の隠しや表示を許可します。

アニメーション属性も相対的でできます。値に先頭の+=または-=文字列シーケンスの場合、属性の現在の値から指定された数値を加算または減算して目標値を計算します。

スタイル属性に加えて、一部の非スタイル属性（例えば：scrollTopとscrollLeft）にもアニメーションを適用できます。

文法1：

$(selector).animate({styles},　duration,　easing,　callback)

文法2：

$(selector).animate({styles},　{options})

例

要素の幅を変更してアニメーションを設定します：

例

$("#btn1").クリック(function(){
　　$("div").アニメーション({幅:　"500ピクセル");
});

テストしてみる‹/›

要素の幅と高さを変更してアニメーション効果を追加します：

例

$("#btn1").クリック(function(){
　　$("div").アニメーション({幅:　"500ピクセル");
　　$("div").アニメーション({高さ:　"400ピクセル");
});

テストしてみる‹/›

複数のスタイル属性と値を渡して要素にアニメーションを適用します：

例

$("#btn1").クリック(function(){
　　$("div").アニメーション({
　　　　　幅:500ピクセル",
　　　　　高さ:400ピクセル"
　　});
});

テストしてみる‹/›

animate()と一緒に使用して：のdurationとeasingのパラメータ：

例

$("button").click(function(){
　　$("div").アニメーション({幅:500ピクセル",　高さ:400ピクセル"},　4000,　"linear");
});

テストしてみる‹/›

animate()とコールバック関数を一緒に使用します：

例

$("button").click(function(){
　　$("div").アニメーション({
　　　　幅:500ピクセル",
　　　　高さ:400ピクセル"
　　},　500,　"linear",
　　function(){
　　　　$(this).after("<h2>アニメーションが完了</h2>");
　　});
});

テストしてみる‹/›

複数のアニメーション{スタイル}と{オプション}を指定するために代替文法を使用します：

例

$("button").click(function(){
　　$("div").アニメーション({
　　　　幅:500ピクセル",
　　　　高さ:400ピクセル"
　　
　　　　duration:500,
　　　　easing:"linear",
　　　　complete:function(){
　　　　　　$(this).after("<h2>アニメーションが完了</h2>");
　　　　}
　　});
});

テストしてみる‹/›

ユーザーがページをスクロールする際にスムーズなスクロールを追加

例

let　size　=　$(".main").height();　//　「.main」の高さを取得
$(window).keydown(function(event)　{
　　if(event.which　===　40)　{　//　else　if(event.which　===
　　　　$("html,　body").animate({scrollTop:　"+="　+　size},　300);
　　}　38)　{　//　もし上向き矢印キーが押されたら
　　　　$("html,　body").animate({scrollTop:　"-="　+　size},　300);
　　}
});

テストしてみる‹/›

すべての段落に相対値を使用してアニメーションを設定する：

例

$("p").click(function(){
　　$(this).animate({
　　　　fontSize:　"+=5px",
　　　　padding　:　"+=10px"
　　});
});

テストしてみる‹/›

さらに、属性のアニメーション値「show」、「hide」または「toggle」を指定することもできます：

例

$("button").click(function(){
　　$("div").animate({height:　"toggle"});
});

テストしてみる‹/›

パラメータ値（文法1）

$(selector).animate({styles},　duration,　easing,　callback)

パラメータ	説明
styles	必須。アニメーション効果を生成するCSS属性の1つまたは複数を指定/値。注意：animate()メソッドと一緒に使用する場合、属性名はキャメルケースで指定する必要があります：paddingTopではなくpaddingです。-top、marginLeftではなくmargin-leftおよびそれに続く
duration	（オプション）アニメーションがどれくらいの時間运行するかを決定する文字列または数字。400ミリ秒可能な値：ミリ秒（例えば100、500、2000など）「fast」「slow」
easing	（オプション）アニメーションの異なるポイントで要素の速度を指定します。デフォルト値は「swing」です。可能な値：「swing」-開始時/終了時はゆっくり動き、中間では速く動く「linear」-一定速度で動く
callback	（オプション）animate関数が実行された後に実行される関数。

パラメータ値（文法2）

$(selector).animate({styles},　{options})

パラメータ	説明
styles	必須。アニメーション効果を生成するCSS属性の1つまたは複数を指定/値（同上）。
options	（オプション）アニメーションの追加オプションを指定オプション: duration - テキストストリングまたは数字、アニメーションがどれくらいの長さで実行されるかを決定 easing - テキストストリング、トランジションで使用するエイジング関数を指示 complete -アニメーションが完了した後に呼び出される関数 step -各アニメーション要素の各アニメーション属性に対して呼び出される関数 progress -アニメーションの各ステップの後に実行される機能 queue-ボールルーン値、アニメーションが効果キューに配置されるかどうかを指定 specialEasing -からstylesCSS属性の1つまたは複数とそれに対応するエイジング関数のマッピング start -アニメーションが始まった時に行われる機能 done -アニメーションが完了した時に行われる機能 fail -アニメーションが完了しない場合に実行される機能 always -アニメーションが停止したが完了しなかった場合に実行される機能

jQueryの効果メソッド

jQueryのHTML/CSSメソッド jQueryの効果メソッド