サイドスリーブログ

「君アレ」番外編 ~イチからのjQuery~ 3


                「君アレ」番外編 ~イチからのjQuery~ 3

アニメーション

ここまでで、【cssのスタイル変更】と【イベント(タイミングのコントロール)】について振り返ってみました。
が、それだけだと一瞬で変更が完了してしまい面白くない。
今回はもっとインタラクティブなサイトを彩る「アニメーション」を導入してみましょう!

jQueryにあらかじめ用意されているanimate()メソッドの使い方を覚えましょう~

js


$(function(){
 .animate({
  'cssプロパティ':'値',
  'cssプロパティ':'値',
  'cssプロパティ':'値'
 },
 アニメーション時間
 );
});

デモ 1

[クリックしてね♪]をクリックしたらテキスト「Hello!」のフォントサイズが12pxから100pxに徐々に大きくなるよ!

デモページ

js


$(function(){
 $("button").click(function(){
  $(".demo04").animate({
  fontSize: "100px"
  }, 1500 );
 });
});

HTML


<button>クリックしてね♪</button>
<div class=”demo04″>Hello!</div>

animate()1つ目のメソッド

[アニメーション完了時の見た目を表現するcssプロパティと値]を渡します。

js


$(function(){
 $("button").click(function(){
  $(".demo04").animate({
  fontSize: "100px"
  }, 1500 );
 });
});

animate()2つ目のメソッド

[どのくらいの時間をかけてアニメーションさせるか]を渡します。
※時間の単位はミリ秒です。「1500」と指定すると1.5秒かけてアニメーションさせます。

js


$(function(){
 $("button").click(function(){
  $(".demo04").animate({
  fontSize: "100px"
  }, 1500 );
 });
});

色が変化するアニメーションについて

フォントや背景の色を変更するにはjQueryにデフォルトで用意されているanimate()メソッドだけではアニメーション出来ないプロパティです。
これらのプロパティをアニメーションさせるにはjQueryの公式拡張ライブラリである『jQuery UI』を読み込まないといけません。

アニメーションは楽しい要素満載なので引き続き掘り下げていこうと思います!

それでは第3回はこのへんで!(・∀・)アデュー

その他の Web制作ネタ帳 ブログ一覧