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

water IT

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

Advertisements

showメソッドの使い方

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

要素の表示
$(‘セレクタ’).show();

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

Click me!

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

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

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

fadeInメソッドの使い方

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

要素の表示(フェイドイン)
$(‘セレクタ’).fadeIn();

Click me!

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

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

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

slideDownメソッドの使い方

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

要素の表示(スライド)
$(‘セレクタ’).slideDown();

Click me!

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

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

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

コメント