2009年11月20日
jQueryのアニメーションslideUp Down 他
jQueryでアニメーションの付いた画像の表示非表示が出来る命令の紹介その2。今回は縦にアニメーションする。
slideDown()
セレクタで指定したブロック要素をdisplay：noneからblockへ切り替える。その際のアニメーションは上から下。()内はミリ秒またはslow,norma,fastを指定できる。
コールバック関数も指定できる。
slideUp()
slideDown()の逆でdisplay：blockからnoneへ切り替える命令。アニメーションは下から上。他はslideDown()と同じ。
slideToggle()
slideDown()とslideUp()を交互に行う命令。他はshow()と同じ。
スクリプトを書いている途中で気が付いたが、アニメーションさせる要素のwidthが指定されていないと期待する挙動が出ない。
今回のslideUp()、slideDown()、slideToggle()は、アニメーションさせるimg要素にwidthが指定されていなかった場合、前回のshow()、hide()と同じ左上から右下（左下から右上）のアニメーションで表示・非表示された。
slideDown()
セレクタで指定したブロック要素をdisplay：noneからblockへ切り替える。その際のアニメーションは上から下。()内はミリ秒またはslow,norma,fastを指定できる。
コールバック関数も指定できる。
slideUp()
slideDown()の逆でdisplay：blockからnoneへ切り替える命令。アニメーションは下から上。他はslideDown()と同じ。
slideToggle()
slideDown()とslideUp()を交互に行う命令。他はshow()と同じ。
スクリプトを書いている途中で気が付いたが、アニメーションさせる要素のwidthが指定されていないと期待する挙動が出ない。
今回のslideUp()、slideDown()、slideToggle()は、アニメーションさせるimg要素にwidthが指定されていなかった場合、前回のshow()、hide()と同じ左上から右下（左下から右上）のアニメーションで表示・非表示された。
ASCII.jp：jQueryでAjaxを利用する基本チュートリアル｜Web制作の現場で使えるjQuery UIデザイン入門を参考に、画像の表示・非表示を試してみました。
slideUpDownボタンで画像を縦に1枚ずつスライドさせながら表示・非表示させています。その順番はslideUp()とslideDown()をif文で場合分しけています。表示の時は茶→赤→黒→青で非表示は逆の青→黒→赤→茶です。
slideToggleボタンは上記と同じ動きをしますが、表示・非表示の順番はいずれも青→黒→赤→茶です。これはslideToggle()ではif文を使わない（使えない）からです。ただその分スクリプトはとてもスッキリします。
コードは以下の通り。
slideUpDownボタンで画像を縦に1枚ずつスライドさせながら表示・非表示させています。その順番はslideUp()とslideDown()をif文で場合分しけています。表示の時は茶→赤→黒→青で非表示は逆の青→黒→赤→茶です。
slideToggleボタンは上記と同じ動きをしますが、表示・非表示の順番はいずれも青→黒→赤→茶です。これはslideToggle()ではif文を使わない（使えない）からです。ただその分スクリプトはとてもスッキリします。
コードは以下の通り。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#slideUDT button#UpDown").click(function(){
if ($("#slideUDT img").css("display")=="block"){
$('#slideUDT img[src="//img01.naganoblog.jp/usr/webdesign/k_01.png"]:not(:animated)').slideUp(250,function(){
$('#slideUDT img[src="//img01.naganoblog.jp/usr/webdesign/k_02.png"]:not(:animated)').slideUp(250,function(){
$('#slideUDT img[src="//img01.naganoblog.jp/usr/webdesign/k_03.png"]:not(:animated)').slideUp(250,function(){
$('#slideUDT img[src="//img01.naganoblog.jp/usr/webdesign/k_04.png"]:not(:animated)').slideUp(250);
});
});
});
}else{
$('#slideUDT img[src="//img01.naganoblog.jp/usr/webdesign/k_04.png"]:not(:animated)').slideDown(250,function(){
$('#slideUDT img[src="//img01.naganoblog.jp/usr/webdesign/k_03.png"]:not(:animated)').slideDown(250,function(){
$('#slideUDT img[src="//img01.naganoblog.jp/usr/webdesign/k_02.png"]:not(:animated)').slideDown(250,function(){
$('#slideUDT img[src="//img01.naganoblog.jp/usr/webdesign/k_01.png"]:not(:animated)').slideDown(250);
});
});
});
};
});
});
$(function(){
$("#slideUDT button#Toggle").click(function(){
$('#slideUDT img[src="//img01.naganoblog.jp/usr/webdesign/k_01.png"]:not(:animated)').slideToggle(250,function(){
$('#slideUDT img[src="//img01.naganoblog.jp/usr/webdesign/k_02.png"]:not(:animated)').slideToggle(250,function(){
$('#slideUDT img[src="//img01.naganoblog.jp/usr/webdesign/k_03.png"]:not(:animated)').slideToggle(250,function(){
$('#slideUDT img[src="//img01.naganoblog.jp/usr/webdesign/k_04.png"]:not(:animated)').slideToggle(250);
});
});
});
});
})
</script>
<div id="slideUDT">
<p><button id="UpDown">slideUpDown</button><button id="Toggle">slideToggle</button></p>
<img src="//img01.naganoblog.jp/usr/webdesign/k_04.png" width="90px" height="90px" style="display:block" />
<img src="//img01.naganoblog.jp/usr/webdesign/k_03.png" width="90px" height="90px" style="display:block" />
<img src="//img01.naganoblog.jp/usr/webdesign/k_02.png" width="90px" height="90px" style="display:block" />
<img src="//img01.naganoblog.jp/usr/webdesign/k_01.png" width="90px" height="90px" style="display:block" />
</div>
jQueryでIE6を透過PNGに対応させる
jQueryで作るロールオーバー
jQueryで作るオリジナルツールチップ
jQueryで作るタブパネル
jQueryで作るアコーディオンパネル
jQueryでイメージギャラリーを作成。
jQueryで作るロールオーバー
jQueryで作るオリジナルツールチップ
jQueryで作るタブパネル
jQueryで作るアコーディオンパネル
jQueryでイメージギャラリーを作成。
Posted by ヒダカ at 18:44│Comments(0)
│jQuery
