2009年11月23日
jQueryでのアニメーション animate()
jQueryでアニメーションの付いた画像の表示非表示が出来る命令の紹介その4。今回は独自のアニメーションを作成するanimate()。
animate()
セレクタで指定した要素に、指定したcssプロパティ、スピード、動き、コールバック関数でアニメーションできる。
animate()
セレクタで指定した要素に、指定したcssプロパティ、スピード、動き、コールバック関数でアニメーションできる。
ASCII.jp：jQueryでAjaxを利用する基本チュートリアル｜Web制作の現場で使えるjQuery UIデザイン入門を参考に、画像のアニメーションを試してみました。
animateボタンをクリックすると、画像が中心部へ向かって等速で縮小し、その後ゆっくりと消えていきます。
コードは以下の通り。
animateボタンをクリックすると、画像が中心部へ向かって等速で縮小し、その後ゆっくりと消えていきます。
コードは以下の通り。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#animate button").click(function(){
$("#animate img").animate({
width:"18px",height:"18px",top:"111px",left:"81px",
},400,"linear",function(){
$("#animate img").fadeTo(3000,"0");
});
});
})
</script>
<div id="animate" style="width:180px; height:240px; position:relative;">
<button>animate</button>
<img src="//img01.naganoblog.jp/usr/webdesign/k_03.png" style="display:block;position:absolute;top:30px;" />
</div>
jQueryでIE6を透過PNGに対応させる
jQueryで作るロールオーバー
jQueryで作るオリジナルツールチップ
jQueryで作るタブパネル
jQueryで作るアコーディオンパネル
jQueryでイメージギャラリーを作成。
jQueryで作るロールオーバー
jQueryで作るオリジナルツールチップ
jQueryで作るタブパネル
jQueryで作るアコーディオンパネル
jQueryでイメージギャラリーを作成。
Posted by ヒダカ at 17:20│Comments(0)
│jQuery
