*

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

公開日: : 最終更新日:2015/08/03 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はメソッドチェーンで続けて実行する命令を書けますが、

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

スポンサードリンク

関連記事

jQuery

CSSプロパティの設定と値の取得

jQueryで、シンプルにCSSのプロパティの値を設定したり、取得したりできます。CSSを操作すると

記事を読む

catejQuery

属性値の変更・取得・削除、要素の置き換え

jQueryはHTMLの要素だけではなく、属性に設定されている値を 変更したり、取得出来たりします

記事を読む

catejQuery

jQueryのセレクター2 eq/lt/gt/headerセレクター

前回に引き続きjQuery独自の セレクターについて紹介します。 eq/lt/gtセレクター

記事を読む

catejQuery

要素の表示・非表示を交互に切り替える toggle()

toggle()は、要素の表示・非表示を交互に 切り替える命令です。セレクターで指定した要素が

記事を読む

catejQuery

jQueryのセレクター3 parent/contains/hasセレクター

前回と同様にjQueryのセレクターを紹介します。 parentセレクター parentセレ

記事を読む

catejQuery

パンくずメニューをスライドさせて表示させる。

今回作成するのは、 パンくずリストに動きをつけて表示させる jQueryを作成します。 サ

記事を読む

jQuery

ボタンにカーソルを乗せたとき色々と効果を付けてみる

今回は、ボタンに色々な効果を付けてみます。サンプルコードの実行結果はこちら サンプ

記事を読む

catejQuery

独自のアニメーションを指定する animate()

animate()命令は、任意のCSSプロパティの 値を徐々に変更して、独自のアニメーションを作成

記事を読む

catejQuery

マウスのボタン操作を感知する mousedown()/mouseup()

mousedown(),mouseup()は、特定の要素上でマウスの 何かしらのボタン(左ボタン・

記事を読む

catejQuery

フォーム関連のイベント処理

フォーカスを感知する focus() focus()は、input要素などのフォーム部品が マウ

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑