jQuery の .animate() を使って横に伸びるバーを作ってみよう
jQuery の「animate」で伸びるバーを作ってみよう
今回は jQuery の「.animate()」APIを使って横に伸びるバーを作成します。
<サンプル>
横に伸びるバーは div 要素の横幅を .animate() で拡大して実現しています。下のピンク色のボックス(idは"nobi-box")をクリックしてみてください。ピンク色のボックスが5秒間で領域の横幅いっぱいまで拡大します。※マージンがある場合はマージンの分だけ余白が残ります。
<HTML ソース>
HTMLソースは ID を付けた div タグだけのシンプルな内容です。
<div id="nobi-box"></div>
<jQuery コード>
.animate() で横幅が 5000ms(5秒)で100%になるように設定しています。このように jQuery の animate を使用すれば、動きのあるコンテンツが簡単に作れます。
//ページが読み込まれたら実行させる
$(function(){
// ID="nobi-box"の要素がクリックされたら実行
$("#nobi-box").click(function(){
$("#nobi-box").animate( {width:"100%"} , 5000);
});
});
END