表示のエフェクト (3/4)
作成:2010-04-14 14:21
更新:2010-05-12 10:50
更新:2010-05-12 10:50
■slideとfade
show/hide以外にも、視覚効果の機能は用意されています。それは「スライド効果」と「フェード効果」です。
スライド効果は、エレメントを上にするすると引き上げて消したり、上からするすると引き出してきて表示したりするものです。これには、以下の3つのメソッドがあります。
slideDown――引き出して画面に表示する。
slideUp――引き上げて画面から消す。
slideToggle――slideDown/slideUpを交互に繰り返す。
フェード効果は、透過度を変えていくエフェクトです。次第に透明になって消えて行ったり、次第に現れてきたりするものです。これも3つのメソッドがあります。
fadeIn――次第に現れてくる。
fadeOut――次第に消えていく。
fadeTo――指定の透過度で表示される。
この中で、やや性格が異なるのは「fadeTo」でしょう。その他は基本的に「エレメントの表示をON/OFFする」ためのものですが、fadeToは違います。これは、指定した透明度に変更するものです。つまり、要素そのものは消えないのです(たとえ透過度を100%すなわち完全に透明に設定しても、要素そのものは消えず、そこに残っています)。
では、これも簡単な利用例を下にあげておきましょう。タイトルの「Test」というテキスト部分をクリックすると、イメージをスライド効果でON/OFFします。また、入力フィールドに0~1の実数を書いてボタンを押すと、イメージが指定の透過度に変更されます。ここでは「slideToggle」「fadeTo」を使っています。
スライド効果は、エレメントを上にするすると引き上げて消したり、上からするすると引き出してきて表示したりするものです。これには、以下の3つのメソッドがあります。
slideDown――引き出して画面に表示する。
slideUp――引き上げて画面から消す。
slideToggle――slideDown/slideUpを交互に繰り返す。
フェード効果は、透過度を変えていくエフェクトです。次第に透明になって消えて行ったり、次第に現れてきたりするものです。これも3つのメソッドがあります。
fadeIn――次第に現れてくる。
fadeOut――次第に消えていく。
fadeTo――指定の透過度で表示される。
この中で、やや性格が異なるのは「fadeTo」でしょう。その他は基本的に「エレメントの表示をON/OFFする」ためのものですが、fadeToは違います。これは、指定した透明度に変更するものです。つまり、要素そのものは消えないのです(たとえ透過度を100%すなわち完全に透明に設定しても、要素そのものは消えず、そこに残っています)。
では、これも簡単な利用例を下にあげておきましょう。タイトルの「Test」というテキスト部分をクリックすると、イメージをスライド効果でON/OFFします。また、入力フィールドに0~1の実数を書いてボタンを押すと、イメージが指定の透過度に変更されます。ここでは「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>
※関連コンテンツ