JavaScript,jQuery,CSS,HTMLの達人

JavaScriptとjQueryとCSSとHTMLの使い方やサンプルのブログ

jQuery の .animate() を使って横に伸びるバーを作ってみよう

f:id:vw-dsg:20200601063533p:plain

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