JavaScript,jQuery,CSS,HTMLの達人

JavaScriptとjQueryとCSSとHTML の使い方を解説しているブログ

jQuery の「animate」を利用して横に伸びるバーを作ってみよう

jQuery の animate を使って伸びるバーを作ってみよう

下の div タグで作ったピンク色のボックス(id="nobi-box")をクリックしてみてください。ピンク色のバーが5秒間で領域の横幅いっぱいまで伸びます。

 

<jQuery ソースコード>

 $(function(){
  $("#nobi-box").click(function(){
   $("#nobi-box").animate({width:"100%"}, 5000);
  });
 }); 

animate で横幅が 5000ms で100%になるように設定しています。 

このように jQuery を利用すれば、アニメーションが簡単に作れますね。 

END