jQueryで垂れ幕のようにスライド表示する

jQueryの勉強を引き続き実施です。要素を垂れ幕のようなスライドしながら表示・非表示するコードを書いてみて実装。
スライド表示・非表示するものをさらに動きのあるものにしたいと思い、ボタンをクリックした時にもアニメーションするようなものに仕上げたので備忘録。
webサイトで「●●とは?」から「●●です」のような垂れ幕が下がるイメージで作りました。
また、今回使用しているのは前回の「jQueryでふわっと表示・非表示にする」に最後に表示した複数の画像を使用してさらに動きを作っています。画面はじめのほうから動きを知りたい方は前回の「jQueryでふわっと表示・非表示にする」も見てみてください。
※jQueryの勉強をしつつ見た目はいい感じにしたかったので、Bootstrap を使用しています。
※要素には画像を使っています。画像についてはご自身でご準備ください。

★応用していくときの流れ

STEP1.ページを表示したときに、スライド式に下がって上がる表示をする。

STEP2.jQueryでボタンをクリックしたときにスライドを下げて表示する。

スポンサーリンク
スポンサーリンク




STEP1-1. htmlファイルを準備する

今回は、前回最後に表示された複数の画像を使用しつつ、htmlファイル内にそれぞれ複数の画像に対してもう一枚ずつ画像を準備します。
そして、追加した4つの画像に対してもidを指定します。
今回は画像1に「id=”msg2a”」を指定し対する画像に「id=”msg2b”」を指定しています。
また、他の画像2~4にも同じようにidを指定しています。
ポイントは、表に出しておく画像と隠しておく画像があるので、表に表示しておく画像には「style=”display:block;””」、ちらっと表示する画像には「style=”display:none;」を指定します。
以下、htmlファイルの中身です。↓

・・・・・省略・・・・・
<div class="row center-block">
<div id="msg2" class="col-md-6" style="padding:10px;display:none;">
 <img id="msg2a" src="./img/jq4_2.jpg" class="img-responsive" alt="" style="display:block;">
  <div id="msg2b" style="display:none;">
   <img src="./img/jq4_2b.jpg" class="img-responsive" alt="">
  </div>
</div>
<div id="msg3" class="col-md-6" style="padding:10px;display:none;">
 <img id="msg3a" src="./img/jq4_3.jpg" class="img-responsive" alt="" style="display:block;">
  <div id="msg3b" style="display:none;">
   <img src="./img/jq4_3b.jpg" class="img-responsive" alt="">
  </div>
</div>
</div>
<div class="row center-block">
 <div id="msg4" class="col-md-6" style="padding:10px;display:none;">
  <img id="msg4a" src="./img/jq4_4.jpg" class="img-responsive" alt="" style="display:block;">
   <div id="msg4b" style="display:none;">
	<img src="./img/jq4_4b.jpg" class="img-responsive" alt="">
   </div>
 </div>
 <div id="msg5" class="col-md-6" style="padding:10px;display:none;">
  <img id="msg5a" src="./img/jq4_5.jpg" class="img-responsive" alt="" style="display:block;">
   <div id="msg5b" style="display:none;">
	<img src="./img/jq4_5b.jpg" class="img-responsive" alt="">
   </div>
 </div>
</div>

続いてもうひとつ、今回スライドダウン・スライドアップする画像がずれていたので、htmlファイルにcssを追加しています。ずれるときはpositionを使用します。
そのため、上記のhtmlでは表に表示する画像と隠れている画像をdivタグで閉じ、囲んでいるdivを親、隠れている画像を子としてpositionで調整しました。
以下、cssをhtmlのbodyタグに追加しています。
※cssのpositionの詳細はここでは省きます。知りたい方はGoogle先生に聞いてみましょう!

  <style>
  #msg2,#msg3,#msg4,#msg5{
  	position:relative;
  }
  #msg2b,#msg3b,#msg4b,#msg5b{
  	position:absolute;
  	top:10px;
  	right:10px;
  	left:10px;
  }
  </style>

どうでしょうか。
ここまでだとまだ以下の画像みたいに複数の画像が並んでいるだけかと思います。

jq4_8

続いて、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でページを表示したときに、スライド式に下がって上がる表示をする

まずは複数の画像に対して用意した隠れ画像をちら見せしていきます。
垂れ幕が下がるような動作は『.slideDown()』メソッド、垂れ幕が上がるような動作は『.slideUp ()』メソッドを使用します。
表示・非表示の速さは800ミリ秒を指定しています。ちらっと見せる感じにするので、スライドが下がったら、上がる動作にしています。
以下の内容を「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,function(){
	$('#msg2b,#msg3b,#msg4b,#msg5b').slideDown(800,function(){
	$('#msg2b,#msg3b,#msg4b,#msg5b').slideUp(800);
	});
	});
	});
	});
	});
	});
});

どうですか?
それぞれの画像の対してスライドが下がって上がって表示されたらOKです。
※ページを開いたときに表示・非表示にならない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。

jq5_1

STEP2-1. htmlファイル内にボタンを追加する

複数の画像をjQueryでスライド表示・非表示ができるようになったら、
次は「jQueryでボタンをクリックしたときにスライドを下げて表示する。」をしてみます。
動作は表に表示している画像に対するボタンをクリックすると、隠れている画像がスライド表示されるようにします。
まずは、htmlファイル内にボタンを準備します。
そしてそれぞれのボタンは複数の画像がちらっと見えたときに表示するので、それぞれに「style=”display:none;」を指定してください。
以下を4つ目の画像の下に記述します。
以下、htmlファイルの中身です。↓

<img src="./img/jq4_5b.jpg" class="img-responsive" alt="">
・・・・・省略・・・・・
<button id="h_btn" type="button" class="btn btn-primary btn-default" style="display:none;">ハート</button>
<button id="k_btn" type="button" class="btn btn-primary btn-default" style="display:none;background:;">クローバー</button>
<button id="sp_btn" type="button" class="btn btn-primary btn-default" style="display:none;">スペード</button>
<button id="d_btn" type="button" class="btn btn-primary btn-default" style="display:none;">ダイヤ</button> 

どうでしょうか。
以下の画像のようにボタンが追加された状態なっていたらOKです。
次はjQueryの記述に入ります。

jq5_2

STEP2-2. jQueryでクリックしたときにスライドを下げて表示する

続いてボタンに動きをつけていきます。
ボタンが『クリック』されたときに動きをするので、『.click()』メソッドを使用します。
動作は、ボタン(id)をクリックしたら対象の画像(id)をスライドが下がるように表示します。
速さは1000ミリ秒を指定しています。
今回、以下のようにそれぞれのボタンにidを指定しています。
・ハート:id=” h_btn”
・クローバー:id=” k_btn”
・スペード:id=” sp_btn”
・ダイヤ:id=” d_btn”
以下、jsファイルの中身です。↓

//ボタンがクリックされたらスライド表示する
$('#h_btn').click(function(){
$('#msg2b').slideDown(1000);
});
$('#k_btn').click(function(){
$('#msg3b').slideDown(1000);
});
$('#sp_btn').click(function(){
$('#msg4b').slideDown(1000);
});
$('#d_btn').click(function(){
$('#msg5b').slideDown(1000);
}); 

どうですか?
ボタンをクリックしたときにスライドしながら表示されたらOKです。
※ボタンをクリックしたときにスライドが下がらない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。

jq5_3

今回の動作確認用にデモサイト準備しました。
よかったら画像をクリックして確認してみてください。↓

デモサイト

デモサイト

スポンサーリンク
スポンサーリンク




シェアする

フォローする

スポンサーリンク
スポンサーリンク