2009年11月22日
jQueryのアニメーションfadeIn Out To
jQueryでアニメーションの付いた画像の表示非表示が出来る命令の紹介その3。今回は透明度を変えて表示・非表示するアニメーション。
fadeIn()
セレクタで指定したdisplay：noneの要素をフェードインのアニメーションで表示する。引数はミリ秒またはslow,norma,fastを指定できる。
コールバック関数も指定できる。
fadeOut()
fadeIn()の逆でセレクタで指定した要素をフェードアウトのアニメーションで非表示にする。他はfadeIn()と同じ。
fadeTo()
引数で指定した透明度にフェードイン／アウトする。他はfadeIn()と同じ。
fadeIn()
セレクタで指定したdisplay：noneの要素をフェードインのアニメーションで表示する。引数はミリ秒またはslow,norma,fastを指定できる。
コールバック関数も指定できる。
fadeOut()
fadeIn()の逆でセレクタで指定した要素をフェードアウトのアニメーションで非表示にする。他はfadeIn()と同じ。
fadeTo()
引数で指定した透明度にフェードイン／アウトする。他はfadeIn()と同じ。
ASCII.jp：jQueryでAjaxを利用する基本チュートリアル｜Web制作の現場で使えるjQuery UIデザイン入門を参考に、画像の表示・非表示を試してみました。
fedeInOutボタンをクリックすると、黒の画像がフェードイン／アウトをします。fadeOut()の命令でfadeIn()を呼び出しています。
ラジオボタンをクリックすると茶の画像の透明度が変化します。
コードは以下の通り。
fedeInOutボタンをクリックすると、黒の画像がフェードイン／アウトをします。fadeOut()の命令でfadeIn()を呼び出しています。
ラジオボタンをクリックすると茶の画像の透明度が変化します。
コードは以下の通り。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#fadeInOut button").click(function(){
$("#fadeInOut img:not(:animated)").fadeOut(1000,function(){
$("#fadeInOut img").fadeIn(1000);
});
});
$("#fadeTo input").click(function(){
$("#fadeTo img").fadeTo(1000,$(this).attr("value"));
});
});
</script>
<div id="fadeInOut" style="width:180; height:250px;">
<p><button>fadeInOut</button></p>
<img src="//img01.naganoblog.jp/usr/webdesign/k_02.png" style="display:block" />
</div>
<div id="fadeTo" style="width:180; height:250px;">
<p>
<label><input type="radio" name="fadeTo" value="1" />100%</label>
<label><input type="radio" name="fadeTo" value="0.75" />75%</label>
<label><input type="radio" name="fadeTo" value="0.5" />50%</label>
<label><input type="radio" name="fadeTo" value="0.25" />25%</label>
<label><input type="radio" name="fadeTo" value="0" />0%</label>
</p>
<img src="//img01.naganoblog.jp/usr/webdesign/k_04.png" style="display:block" />
</div>
jQueryでIE6を透過PNGに対応させる
jQueryで作るロールオーバー
jQueryで作るオリジナルツールチップ
jQueryで作るタブパネル
jQueryで作るアコーディオンパネル
jQueryでイメージギャラリーを作成。
jQueryで作るロールオーバー
jQueryで作るオリジナルツールチップ
jQueryで作るタブパネル
jQueryで作るアコーディオンパネル
jQueryでイメージギャラリーを作成。
Posted by ヒダカ at 19:15│Comments(0)
│jQuery
