表示のエフェクト (1/4)
作成:2010-04-14 13:42
更新:2010-05-12 10:06
更新:2010-05-12 10:06
■show/hideによる表示のON/OFF
JavaScriptのライブラリが使われる一番の目的は、「クールなビジュアルの作成」でしょう。Webページの表示をカッコよくしたい、ということですね。こうした場合に役立つ、各種の視覚効果がjQueryにも用意されています。これらを使うことで、簡単にクールなページが作れるようになります。
（※ただし！ jQueryを使ってクールなページが作れるかどうかは、jQueryの能力ではなく、あなたの能力次第です。どんなにjQueryが優秀でも、才能がないとクールなページは作れませんよ、念のため）
さて、視覚効果というと漠然としていますが、もっとも多く用いられるのは「表示のON/OFF」に関する効果です。すなわち、エフェクトをかけて表示を消したり、表示したりする機能ですね。これらのもっとも基本ともいえるメソッドは、以下のようなものになります。
（ただし、ブラウザによって微妙に表示が異なるようです。うまく動かない時は他のブラウザで試してください。またIE8では互換モードでも動かしてみてください）
このhideでは、エレメントは「非表示」ではなく「消える」ということをよく理解する必要があります。つまり、見えないだけでそこにエレメントが存在しているというわけではなく、エレメント自体がそこからなくなるのです。従って、その下に表示がある場合には、それが上に詰められて表示されたりします。
また視覚効果をよく用いるのは、<img>によるイメージ表示だろうと思いますが、<img>タグの場合、直接、<img>タグをshow/hideしようとしても思うようにエフェクトがかからないので注意してください。<span>や<div>といったタグの中に<img>を用意し、外側の<span>、<div>タグをshow/hideで表示を変更させます。直接<img>タグを指定してshow/hideした場合とどう表示が違うか、確認してみるとよいでしょう。
（※ただし！ jQueryを使ってクールなページが作れるかどうかは、jQueryの能力ではなく、あなたの能力次第です。どんなにjQueryが優秀でも、才能がないとクールなページは作れませんよ、念のため）
さて、視覚効果というと漠然としていますが、もっとも多く用いられるのは「表示のON/OFF」に関する効果です。すなわち、エフェクトをかけて表示を消したり、表示したりする機能ですね。これらのもっとも基本ともいえるメソッドは、以下のようなものになります。
《jQuery》.show( ミリ秒 );
《jQuery》.hide( ミリ秒 );引数には、エフェクト表示にかかる時間をミリ秒単位で指定します。このshow/hideは、そのエレメントを拡大・縮小しながら透過度を操作していきます。hideでは表示が左上に縮小しながら次第に薄れていって最後に消えてしまいます。showではその反対で、透明で見えない状態から次第に現れ、左上から全体に拡大していきます。（ただし、ブラウザによって微妙に表示が異なるようです。うまく動かない時は他のブラウザで試してください。またIE8では互換モードでも動かしてみてください）
このhideでは、エレメントは「非表示」ではなく「消える」ということをよく理解する必要があります。つまり、見えないだけでそこにエレメントが存在しているというわけではなく、エレメント自体がそこからなくなるのです。従って、その下に表示がある場合には、それが上に詰められて表示されたりします。
また視覚効果をよく用いるのは、<img>によるイメージ表示だろうと思いますが、<img>タグの場合、直接、<img>タグをshow/hideしようとしても思うようにエフェクトがかからないので注意してください。<span>や<div>といったタグの中に<img>を用意し、外側の<span>、<div>タグをshow/hideで表示を変更させます。直接<img>タグを指定してshow/hideした場合とどう表示が違うか、確認してみるとよいでしょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<script src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
<!--
function doAction(){
$('#target').hide(3000);
}
function doAction2(){
$('#target').show(3000);
}
//-->
</script>
</head>
<body>
<H1 onclick="doAction2();">TEST.</H1>
<span id="target" onclick="doAction();">
<img src="sample.jpg" id="image1">
</span>
</body>
</html>
※関連コンテンツ