)ver1.0〜上記構文のオプションはobjectオブジェクトで指定します。利用できるプロパティは以下の通りです。・specialEasing:プロパティ(幅や高さなど)毎に個別のイージングを設定します。機能jQueryオブジェクトで指定した要素をフェードアウトして隠します。第1引数に期間を「ミリ秒」で設定することで、演出の速度を変更できます(期間を1000と設定すれば、1秒かけて要素を消します)。期間を設定しないと400ミリ秒のアニメでフェードアウトします。第2引数にfunctionを設定すると演出が完了した後に実行されます。演出の後で隠された要素はcss設定のdisplay属性がnoneになり、ブラウザの描画に負荷をかけないようになっています。v1.4.3からは期間とfunctionの間にイージングを設定して、フェードアウトの加速度を変更できます。引数なしで利用するfadeOutメソッドは引数なしで利用すると、400ミリ秒で要素をフェードアウトして隠します。サンプル(fadeOut/01.html)を開いてbody内にdiv要素が1つあることを確認してください。jQueryは以下の様に記述され、div要素をクリックするとfadeOutメソッドを利用してdiv要素をフェードアウトして隠します(アニメの期間は400ミリ秒)。$("div").click(function(){$("div").fadeOut();});結果としてdiv要素をクリックすると、div要素がフェードアウトして隠れます(fadeInメソッドで再び表示できるので、「消えた」という表現ではなく「隠れる」と表現しています)。期間を設定してアニメの速度を変更する引数に期間(ミリ秒)を設定すると、指定された時間で要素をフェードアウトして隠します。サンプル(fadeOut/02.html)を開いてbodyの構成がfadeOut/01.htmlと同じ事を確認して下さい。jQueryもほとんど同じで、異なるのは以下の様にfadeOutメソッドの引数に期間「1000」が設定されている点だけです。$("div").click(function(){$("div").fadeOut(1000);});結果として、div要素をクリックすると1秒(1000ミリ秒)かけてdiv要素がフェードアウトします。第2引数にfunctionを設定することで、隠した後にfunctionを実行することができます。サンプル(fadeOut/03.html)を開いてbody内の構成がfadeOut/02.htmlと同じ事を確認してください。jQueryは少し変更されています。fadeOutメソッドを確認して下さい。以下の様に第2引数にfunction「inFunc」が設定されています。fadeInメソッドを利用して、隠れた要素を表示します。inFunc(){$("div").fadeIn();};結果として、div要素をクリックすると1秒(1000ミリ秒)かけてdiv要素がフェードアウトします。その後で再びfadeInメソッドによって表示されます。functionは無名関数を利用して、直接設定することができます。(){$("div").fadeIn();});イージングの設定v1.4.3からはfadeOutメソッドの第2引数にイージングの設定ができるようになりました。jQueryが利用できるイージングは「swing」と「linear」の2種類しかありません。デフォルトは「swing」です。イージングの種類はプラグインを追加することで増やすことができます。→プラグイン「イージングの追加」サンプル(fadeOut/04.html)を開いてbody内の構成がfadeOut/02.htmlと同じ事を確認してください。jQueryもほとんどfadeOut/02.htmlと同じで、異なるのは以下の様に第2引数にイージング「linear」が追加された点だけです。"linear");});結果として、div要素をクリックすると「等速」でアニメが再生されます。違いが分かりにくいので、イージングの「swing」と「linear」を比較できるサンプルを作成しました。サンプル(fadeOut/04b.html)ではbutton要素をクリックすると、id属性がswingと設定された方は「swing」のイージング、id属性がlinearと設定された方は「linear」のイージングで演出されます。違いは分からないかもしれませんが、linearは等速で演出し、swingは徐々に加速後、徐々に減速します。フェードアウトが完了したらdisplay属性がnoneになりますfadeOutメソッドでフェードアウトした要素はcss設定のdisplay属性がnoneになり表示されなくなります。これはケースによってはレイアウト崩壊の原因になるので注意しましょう。slideUpメソッドも隠れた後にdisplay属性がnoneになるのですが、演出的にあまり気になりません。fadeOutでは気になります。サンプル(fadeOut/05.html)を開いてbody内に2つのdiv要素があることを確認して下さい。区別できるようにcss設定で背景色を青(testのid属性)と赤(redのid属性)にしています。jQueryは以下の様に記述され、青いdiv要素をクリックするとfadeOutメソッドを利用してフェードアウトするようにしています。$("div.test").click(function(){$("div.test").fadeOut();});青いdiv要素をクリックするとフェードアウトしてdiv要素が隠れるのですが、このとき下に配置された赤いdiv要素が上に移動することを確認して下さい。これは青いdiv要素のフェードアウトが完了したためcssのdisplay設定がnoneになり消されたためです。赤いdiv要素が上に上がるのを防ぎたい場合は、サンプル(fadeOut/05b.html)のように他のdiv要素で位置を固定します。サンプルfadeOut/05b.htmlでは以下の様にclass属性がfixBoxのdiv要素にフェードする要素を入れることで、フェードする要素が消えてもレイアウトが崩れないようにしています。引数にobjectオブジェクトを設定することで様々な処理が可能になります。animate(prop,option)メソッドと同じなので、詳細はそちらを参照してください。ここではdurationプロパティとstepプロパティを利用したサンプルを紹介します。サンプル(fadeOut/06.html)を開いてbody内の構成がfadeOut/01.htmlと同じことを確認してください。jQueryでは、まず以下の部分を確認してください。$("div").css("opacity");$("div").text(myOpacoty);}1行目でobjectオブジェクトを作成し、2行目でdurationプロパティを設定しています。ここでは3000(ミリ秒)を設定しているので3秒かけて演出します。3〜6行目ではprogressプロパティを設定しています。このプロパティにfunctionを代入しておくと演出をしている間に実行したい処理を設定できます。このサンプルではdiv要素の透明度を取得し、それをdiv要素内に表示しています。cssのopacityプロパティは一部のブラウザで利用できません。chromeやsafari等webkit系のブラウザで確認してください。作成したobjectオブジェクトは以下の様にfadeOutメソッドの引数として設定します。$("div").click(function(){$("div").fadeOut(testObj);});結果として、div要素をクリックすると3秒かけてdiv要素がフェードアウトしていきますが、progressプロパティに設定した処理によりdiv要素内に刻々とdiv要素の透明度(0〜1)が表示されます。fadeInメソッドを利用します。fadeToメソッドを利用します。fadeToggleメソッドを利用すると、要素が表示されている時は隠し、隠れている時は表示します。メモ期間の設定について第1引数の期間を設定するところでは「slow」「fast」といったキーワードも利用することができます(fastは200ミリ秒、slowは600ミリ秒)。サンプル(fadeOut/test01.html)では以下の様に引数に「slow」を設定しています(文字列なのでクォートを忘れずに)。$("div").click(function(){$("div").fadeOut("slow");});結果として、div要素をクリックすると「ゆっくりめ」に消えていきます。複数の対象にも対応していますセレクタに一致する要素が複数あっても、fadeOutメソッドでまとめて隠すことができます。サンプル(fadeOut/test02.html)を開いてjQueryがfadeOut/02.htmlと同じ事を確認して下さい。body内の構成は変更され、div要素が3つに増えています。<body><div></div><div></div><div></div></body>結果として、どのdiv要素をクリックしても全てのdiv要素が隠れます。