jqueryでアニメーションを作ろう！

問題4：jqueryでアニメーションを作ろう！

今回はanimateの簡単な使い方を学習しましょう！

あらかじめエディタに書くコード

                <div class="box">あ</div>
<button>ここをクリック</button>
¥HTML¥

                .box{
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 2px solid black;
  margin-bottom: 30px;
  font-size: 1em;
}
¥CSS¥

期待する画面

解答ソースコード

              $(function () {
  $("button").click(function(){
    $(".box").animate({fontSize:"2em"},3000,"swing");
  });
});
¥JavaScript¥

解説

今回はjqueryのanimateの簡単な使い方を学びました。まずanimateは({cssのプロパティ:値},アニメーションの時間,動きの種類)という風に設定します。cssのプロパティは今回のように二文字に分かれている場合などはfontSizeのように大文字にしてつなげます。cssの値についてはそのまま数字を入れてもいいのですが、今回の場合だとたとえば2を入れると2pxとして認識されます。そのため"で囲んであげて、2emとしています。アニメーションの時間はmsを単位としているため、今回の場合3秒となります。そして動きの種類ですが、初期値ではlinearになっています。swingは始めと最後をゆっくりと、真ん中を早くするという動きをします。animateはcssだけ設定していればあとは省略可能です。

ログインして解答を見る

#忍者CODE無料問題集で活動を記録しよう

完了にする！

BACK > inputの応用へ

NEXT > jqueryでsin,cosを使おう！へ

コース一覧に戻る