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