jQueryの勉強を引き続き実施です。要素をふわっと表示したり、非表示にするコードを書いてみて実装。
ふわっと表示したり非表示にするものをさらに動きのあるものにしたいと思い、ボタンをクリックした時にもアニメーションするようなものに仕上げたので備忘録。
今回は、webサイトを表示したときの「いらっしゃいませ」からスタートに誘導する想定で作りました。
※jQueryの勉強をしつつ見た目はいい感じにしたかったので、Bootstrapを使用しています。
※要素には画像を使っています。画像についてはご自身でご準備ください。
★応用していくときの流れ
STEP1. ふわっと画像1を非表示にした後、画像2をふわっと表示する。
↓
STEP2. jQueryでボタンをクリックしたときに複数の画像を表示する。
STEP1-1. htmlファイルを準備する
まずは、htmlファイル内に1番目に表示する画像と2番目に表示する画像を準備します。
そして、それぞれの画像に対してidを指定します。
今回は1番目に表示する画像に「id=” msg1a”」、2番目に表示する画像に「id=” msg1b”」を指定しています。
順番に表示したいので、1番目に表示する画像には「style=”display:block;””」、2番目に表示する画像には「style=”display:none;」を指定してください。
以下、htmlファイルの中身です。↓
・・・・・省略・・・・・ <body> ・・・・・省略・・・・・ <div id="msg1a" style="display:block;"> <img src="./img/jq4_1a.jpg" class="img-responsive" alt=""> </div> <div id="msg1b" style="display:none;"> <img src="./img/jq4_1b.jpg" class="img-responsive" alt=""> </div>
どうでしょうか。ここまでだと画像1だけどーんと表示されていたらOKです。
続いて、jQueryは別ファイルに記述することが多いのでhtmlファイルからjsファイルを参照するようにします。
今回はjsファイルの名前を「sample.js」として、以下をbodyの閉じタグ前に記述します。
・・・・・省略・・・・・ <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="sample.js"></script> </body>
STEP1-2. jQueryでふわっと画像1を非表示にした後、画像2をふわっと表示する
まずはふわっと画像1を表示した後に画像2を表示してみます。
ふわっとした表示は『.fadeIn()』メソッド、ふわっと非表示は『.fadeOut()』メソッドを使用します。
表示・非表示の速さは画像1が2000ミリ秒でふわっと非表示にして、画像2を600ミリ秒でふわっと表示するように指定しています。
以下の内容を「sample.js」に記述します。
//画像1を非表示した後に画像2を表示する $(function(){ $('#msg1a').fadeOut(2000,function(){ $('#msg1b').fadeIn(600); }) });;
どうですか?
以下の画像みたいに画像1がふわっと非表示になった後に、画像2がふわっと表示されたらOKです。
※ページを開いたときに表示・非表示にならない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
STEP2-1. htmlファイル内に複数の画像とボタンを追加する
画像1と画像2をjQueryでふわっとした表示・非表示ができるようになったら、
次は「jQueryでボタンをクリックしたときに複数の画像を表示する。」をしてみます。
動作は画像2が表示されたときにボタンをクリックすると、複数の画像が順番にふわっと表示されるようにします。
まずは、htmlファイル内にボタンを1つと複数の画像を準備します。追加した複数の画像はボタンをクリックしたときに表示するので、それぞれに「style=”display:none;」を指定してください。
以下を画像2の下に記述します。
以下、htmlファイルの中身です。↓
<img src="./img/jq4_1b.jpg" class="img-responsive" alt=""> ・・・・・省略・・・・・ <div id="msg2" class="col-md-6" style="padding:10px;display:none;"><img src="./img/jq4_2.jpg" class="img-responsive" alt=""></div> <div id="msg3" class="col-md-6" style="padding:10px;display:none;"><img src="./img/jq4_3.jpg" class="img-responsive" alt=""></div> <div id="msg4" class="col-md-6" style="padding:10px;display:none;"><img src="./img/jq4_4.jpg" class="img-responsive" alt=""></div> <div id="msg5" class="col-md-6" style="padding:10px;display:none;"><img src="./img/jq4_5.jpg" class="img-responsive" alt=""></div>
どうでしょうか。
以下の画像のように追加した複数の画像は表示されていないまま、画像2の下にボタンが追加された状態なっていたらOKです。
次はjQueryの記述に入ります。
STEP2-2. jQueryでボタンがクリックされたときに複数の画像をふわっと表示する
続いてボタンに動きをつけていきます。
ボタンが『クリック』されたときに動きをするので、『.click()』メソッドを使用します。
また、順番に表示する画像にはそれぞれidを指定します。
動作は、ボタン(id)をクリックしたら画像2とボタンが消えて複数の画像(id)を順番に表示されるようにします。
それでは、一気に書いていきます。以下、「sample.js」ファイルに追記します。↓
//ボタンをクリックしたときに複数の画像を順番に表示する $('#s_btn').click(function(){ $('#msg1b,#s_btn').fadeOut("fast",function(){ $('#msg2').fadeIn(600,function(){ $('#msg3').fadeIn(600,function(){ $('#msg4').fadeIn(600,function(){ $('#msg5').fadeIn(600); }); }); }); }); });
どうですか?
ボタンをクリックしたときに画像2とボタンが消えて、複数の画像が順番に表示されたらOKです。
※ページを開いたときに表示が変わらず、指定した幅と高さで表示されていない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
今回の動作確認用にデモサイト準備しました。
よかったら画像をクリックして確認してみてください。↓