表示のエフェクト (3/4)
作成:2010-04-14 14:21
更新:2010-05-12 10:50
更新:2010-05-12 10:50
■slideとfade
show/hide以外にも、視覚効果の機能は用意されています。それは「スライド効果」と「フェード効果」です。
スライド効果は、エレメントを上にするすると引き上げて消したり、上からするすると引き出してきて表示したりするものです。これには、以下の３つのメソッドがあります。
slideDown――引き出して画面に表示する。
slideUp――引き上げて画面から消す。
slideToggle――slideDown/slideUpを交互に繰り返す。
フェード効果は、透過度を変えていくエフェクトです。次第に透明になって消えて行ったり、次第に現れてきたりするものです。これも３つのメソッドがあります。
fadeIn――次第に現れてくる。
fadeOut――次第に消えていく。
fadeTo――指定の透過度で表示される。
この中で、やや性格が異なるのは「fadeTo」でしょう。その他は基本的に「エレメントの表示をON/OFFする」ためのものですが、fadeToは違います。これは、指定した透明度に変更するものです。つまり、要素そのものは消えないのです（たとえ透過度を100%すなわち完全に透明に設定しても、要素そのものは消えず、そこに残っています）。
では、これも簡単な利用例を下にあげておきましょう。タイトルの「Test」というテキスト部分をクリックすると、イメージをスライド効果でON/OFFします。また、入力フィールドに０～１の実数を書いてボタンを押すと、イメージが指定の透過度に変更されます。ここでは「slideToggle」「fadeTo」を使っています。
スライド効果は、エレメントを上にするすると引き上げて消したり、上からするすると引き出してきて表示したりするものです。これには、以下の３つのメソッドがあります。
slideDown――引き出して画面に表示する。
slideUp――引き上げて画面から消す。
slideToggle――slideDown/slideUpを交互に繰り返す。
フェード効果は、透過度を変えていくエフェクトです。次第に透明になって消えて行ったり、次第に現れてきたりするものです。これも３つのメソッドがあります。
fadeIn――次第に現れてくる。
fadeOut――次第に消えていく。
fadeTo――指定の透過度で表示される。
この中で、やや性格が異なるのは「fadeTo」でしょう。その他は基本的に「エレメントの表示をON/OFFする」ためのものですが、fadeToは違います。これは、指定した透明度に変更するものです。つまり、要素そのものは消えないのです（たとえ透過度を100%すなわち完全に透明に設定しても、要素そのものは消えず、そこに残っています）。
では、これも簡単な利用例を下にあげておきましょう。タイトルの「Test」というテキスト部分をクリックすると、イメージをスライド効果でON/OFFします。また、入力フィールドに０～１の実数を書いてボタンを押すと、イメージが指定の透過度に変更されます。ここでは「slideToggle」「fadeTo」を使っています。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※スライドの視覚効果
《jQuery》.slideDown( ミリ秒数 [, 関数] );
《jQuery》.slideUp( ミリ秒数 [, 関数] );
《jQuery》.slideToggle( ミリ秒数 [, 関数] );
※フェードの視覚効果
《jQuery》.fadeIn( ミリ秒数 [, 関数] );
《jQuery》.fadeOut( ミリ秒数 [, 関数] );
《jQuery》.fadeTo( ミリ秒数 , 透過度 [, 関数] );
※サンプルコード
<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').slideToggle(3000);
}
function doFade(){
$('#target').fadeTo(3000,$('#text1').val());
}
//-->
</script>
</head>
<body>
<H1 onclick="doAction();">TEST.</H1>
<span id="target">
<img src="sample.jpg" id="image1">
</span>
<input type="text" id="text1">
<input type="button" value="click" onclick="doFade();">
</body>
</html>
※関連コンテンツ