メソッドでエフェクト操作
表示、非表示
$(要素).show(エフェクト時間, function(){処理}); |
$(要素).hide(エフェクト時間, function(){処理}); |
$(要素).toggle(エフェクト時間, function(){処理}); |
$(要素).toggle(false); |
show()は引数が無ければ隠された要素をすぐに表示し、hide()はすぐに隠します。引数を指定した場合はいずれもアニメーション効果が実行されます。第一引数には、fastとslowの他、ミリ秒単位で数値を指定できます。toggle()は要素の状態から表示、非表示を実行します。引数に「true」を設定すると「表示」、「false」を設定すると「非表示」になります。また、二行目から四行目の最後の引数の「function(){処理}」はコールバック関数です。
フェード
$(要素).fadeIn(エフェクト時間, function(){処理}); |
$(要素).fadeOut(エフェクト時間, function(){処理}); |
$(要素).fadeTo(エフェクト時間, 透明度, function(){処理}); |
fadeIn()はだんだんと表示を濃くする働きがあります。fadeOut()はその逆で次第に薄くなります。fadeTo()はこれらの引数に透明度も指定できます。第一引数には、fastとslowの他、ミリ秒単位で数値を指定できますが、fadeTo()のみエフェクト時間を省略できません。最後の引数の「function(){処理}」はコールバック関数です。
スライド
$(要素).slideUp(エフェクト時間, function(){処理}); |
$(要素).slideDown(エフェクト時間, function(){処理}); |
$(要素).slideToggle(エフェクト時間, function(){処理}); |
slideUp()は要素の元の高さから0までゆっくり変えていきます。slideDown()は要素の高さを0から元の高さにゆっくり変えます。slideToggle()は表示状態によって両者のどちらかの効果を実行します。第一引数には、fastとslowの他、ミリ秒単位で数値を指定できます。また、最後の引数の「function(){処理}」はコールバック関数です。
カスタムアニメーション
$(要素).animate(cssのプロパティ配列, エフェクト時間, 動きの変化, function(){処理}); |
$(要素).animate(cssのプロパティ配列, オプション配列); |
二行目の書式の第一引数にはcssプロパティで数値を指定できるものを記入します。また、連想配列の形でcssプロパティ名と最後に達する値をコロンで区切って入れていきます。この値には「+=」「-=」を使って、現在値からの差分を指定できます。また、widthやheightでは、show、hide、toggleが数値の代わりに使えます。第二引数には、fastとslowの他、ミリ秒単位で数値を指定できます。第三引数ではアニメーションの際にそれぞれのプロパティ値をどれだけ変化させるかを指定できます。デフォルトでは「linear」と「swing」のみですが、関数を渡したり、プラグインで必要に応じて設定を変更できます。尚、二行目の最後の引数の「function(){処理}」はコールバック関数です。三行目の書式の第一引数は二行目の書式と同じです。第二引数には連想配列でそれぞれのパラメータを記入します。「duration:効果時間」「queue:エフェクトのfxキューへの登録をtrueとfalseで指定」「specialEasing:連想配列として各cssプロパティとその変化量を入力」「easing:linear、swing、独自関数名」「complete:コールバック関数」「step:段階によって実施される関数」がこれに当たります。
視覚効果のキュー
$(エレメント).queue(); |
$(エレメント).queue(キュー名, 関数配列); |
$(エレメント).queue(function(){処理}); |
$(エレメント).dequeue(キュー名); |
$(エレメント).clearQueue(キュー名); |
$(エレメント).delay(待機時間, キュー名); |
queue()はキュー名のみもしくは省いた場合、キューの登録関数のデータを配列で返します。配列を渡すとすでに存在するキューの内容を引数の配列関数で置換します。またコールバック関数が指定されていたら、キューの最後に関数を挿入できます。dequeue()はキューから関数を一つ取得して実行します。clearQueue()は全ての関数をキューから除去します。delay()はキュー関数同士の待機時間を指定します。上記の例では1000ミリ秒です。
アニメーションの停止
$(エレメント).stop(キュークリア, アニメーションの終了); |
第一引数にtrueを指定すると、fxキューに登録されているアニメーション効果がクリアにされます。第二引数にtrueを指定すると、停止と共にアニメーションの最終到達値にcssプロパティ値が設定されます。
アニメーションの無効化
「$」はjQueryの短縮形で「jQuery.fx.off = true」と記入しても同じ意味になります。また、trueは無効、falseにすればアニメーションが有効になります。