スポンサーリンク
スポンサーリンク

非表示の要素を表示する show()

jQuery

show()は、CSSのdisplayプロパティの値が「none」、
非表示のHTML要素を、アニメーションしながら表示する命令です。

要素の透明度を透明から不透明に、サイズ(高さと幅)を0から
本来のサイズに徐々に変化させて、最後にdisplayプロパティの
価を「block」に切り替えます。

対象となる要素はセレクターで指定して。show(…)の括弧内に
アニメーションのスピードを設定します。

実行結果はこちらです。

アニメーションのスピードは「slow」「fast」のどちらか、
またはミリ秒を指定します。(1秒=1,000ミリ秒)で指定します。

1秒かけてdiv要素を指定したいときは、

$(“div”).show(1000);

と書きます。スピードを省略すると、show()はアニメーション処理は
しないで、表の要素をすぐに表示します。

$(“div”).show();

下記の記述と同様です。

$(“div”).css(“display”,”block”);

show()にコールバック関数を設定する

show(…)は、スピードの後ろに、「,」カンマ区切りで
コールバック関数を設定できます。

$( セレクター ).show( スピード,コールバック関数 );

コールバック関数とは、アニメーションの処理が完了した後に
続けて実行される命令のことです。

処理が終わったら、この関数を呼び出す
指定するのでコールバック関数と呼ばれます。function(){…}の
形式で指定して、{…}内に処理の内容を記述します。

jQueryはメソッドチェーンで続けて実行する命令を書けますが、

メソッドチェーンで記述した命令がアニメーションの終了を
待たずに実行
されるのに対して、
コールバック関数はアニメーションが終わってから実行されます。

コメント

タイトルとURLをコピーしました