jQueryで要素をアニメーションさせながら表示する方法/show、fadeIn、slideDownメソッドの使い方

jQueryで要素を表示するだけであればshowメソッドだけで事足りますが、アニメーションしながら表示するということだと、いくつか種類があります。

showメソッドの使い方

まずは基本形のshowメソッドです。「隠す」メソッドのhideと対になっています。

頭に$を付けてセレクタを指定することで、実際にはjQuery用のオブジェクトを生成してメソッドを適用しています。セレクタの適用ルールはCSSと同じで、クラスやIDも指定できます。

Click me!
showメソッドが実行されました

$("#show").click(function() {
$("#toshow").show();
});

showの引数に値を入れることで、時間を指定することができます。数字を入力すると1000 = 1秒換算になります。
Click me!
showメソッドが実行されました

$("#show2").click(function() {
$("#toshow2").show(3000);
});

fadeInメソッドの使い方

ぼんやりと要素を表示する（フェイドインする）アニメーションです。fadeOutメソッドと対になっています。

Click me!
fadeInメソッドが実行されました

$("#fade-in").click(function() {
$("#fadeIn").fadeIn();
});

引数には「fast」「normal」「slow」を指定することも可能です。省略した時はnormalで実行されます。
Click me!
fadeInメソッドが実行されました

$("#fade-in2").click(function() {
$("#fadeIn2").fadeIn("slow");
});

slideDownメソッドの使い方

最後に、要素をスライドしながら表示するslideDownメソッドです。slideUpと対になっています。

Click me!
slideDownメソッドが実行されました

$("#slide-down").click(function() {
$("#slideDown").slideDown();
});

上の例だとせり上がりながら表示されてますが、たとえばdivでやるとこんな感じになります。
Click me!

$("#slide-down2").click(function() {
$("#slideDown2").slideDown(2000);
});