2009年11月18日
jQueryのアニメーションshow hide toggle
jQueryでアニメーションの付いた画像の表示非表示が出来る命令の紹介。
show()
セレクタで指定したブロック要素のdisplayをnoneからblockへ切り替える。()内はミリ秒またはslow,norma,fastを指定できる。
コールバック関数も指定できる。
hide()
showの逆でdisplayをblockからnoneへ切り替える命令。他はshow()と同じ。
toggle()
show()とhide()を交互に行う命令。他はshow()と同じ。
show()
セレクタで指定したブロック要素のdisplayをnoneからblockへ切り替える。()内はミリ秒またはslow,norma,fastを指定できる。
コールバック関数も指定できる。
hide()
showの逆でdisplayをblockからnoneへ切り替える命令。他はshow()と同じ。
toggle()
show()とhide()を交互に行う命令。他はshow()と同じ。
ASCII.jp：jQueryでAjaxを利用する基本チュートリアル｜Web制作の現場で使えるjQuery UIデザイン入門を参考に、画像の表示・非表示を試してみました。
startボタンの例は、show()にコールバック関数を指定しています。
コードは以下の通り。
startボタンの例は、show()にコールバック関数を指定しています。
showボタンで画像を表示・hideボタンで非表示
toggleボタンで画像を表示・非表示
startボタンで4枚の画像を1枚ずつ非表示
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#showhide button#show").click(function(){
$("#showhide img:not(:animated)").show(1000);
});
$("#showhide button#hide").click(function(){
$("#showhide img:not(:animated)").hide(1000);
});
$("#animetoggle button").click(function(){
$("#animetoggle img:not(:animated)").toggle(1000);
});
$("#animestart button").click(function(){
$('#animestart img[src="//img01.naganoblog.jp/usr/webdesign/k_04.png"]').hide(1000,function(){
$('#animestart img[src="//img01.naganoblog.jp/usr/webdesign/k_03.png"]').hide(1000,function(){
$('#animestart img[src="//img01.naganoblog.jp/usr/webdesign/k_02.png"]').hide(1000,function(){
$('#animestart img[src="//img01.naganoblog.jp/usr/webdesign/k_01.png"]').hide(1000);
});
});
});
});
})
</script>
<div id="showhide" style="width:360px;height:250px;">
<p>showボタンで画像を表示・hideボタンで非表示</p>
<button id="show">show</button><button id="hide">hide</button>
<img src="//img01.naganoblog.jp/usr/webdesign/k_01.png" style="width:180px;height:180px;display:block;" />
</div>
<div id="animetoggle" style="width:360px;height:250px;"><p>toggleボタンで画像を表示・非表示</p>
<button style="display:block">toggle</button>
<img src="//img01.naganoblog.jp/usr/webdesign/k_03.png" style="float:left;width:180px;height:180px;display:block;" />
</div>
<div id="animestart" style="width:360px;height:160px;">
<p>startボタンで4枚の画像を1枚ずつ非表示</p>
<button style="display:block">start</button>
<img src="//img01.naganoblog.jp/usr/webdesign/k_01.png" style="float:left;width:90px;height:90px;margin:0px;" />
<img src="//img01.naganoblog.jp/usr/webdesign/k_02.png" style="float:left;width:90px;height:90px;margin:0px;" />
<img src="//img01.naganoblog.jp/usr/webdesign/k_03.png" style="float:left;width:90px;height:90px;margin:0px;" />
<img src="//img01.naganoblog.jp/usr/webdesign/k_04.png" style="float:left;width:90px;height:90px;margin:0px;" />
</div>
jQueryでIE6を透過PNGに対応させる
jQueryで作るロールオーバー
jQueryで作るオリジナルツールチップ
jQueryで作るタブパネル
jQueryで作るアコーディオンパネル
jQueryでイメージギャラリーを作成。
jQueryで作るロールオーバー
jQueryで作るオリジナルツールチップ
jQueryで作るタブパネル
jQueryで作るアコーディオンパネル
jQueryでイメージギャラリーを作成。
Posted by ヒダカ at 18:33│Comments(0)
│jQuery
