問題
4
jQuery
jqueryでアニメーションを作ろう！
jQueryの問題に挑戦しよう！
問題
「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¥
期待する画面
解答と解説（jqueryでアニメーションを作ろう！）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
今回はjqueryのanimateの簡単な使い方を学びました。まずanimateは({cssのプロパティ:値},アニメーションの時間,動きの種類)という風に設定します。cssのプロパティは今回のように二文字に分かれている場合などはfontSizeのように大文字にしてつなげます。cssの値についてはそのまま数字を入れてもいいのですが、今回の場合だとたとえば2を入れると2pxとして認識されます。そのため"で囲んであげて、2emとしています。アニメーションの時間はmsを単位としているため、今回の場合3秒となります。そして動きの種類ですが、初期値ではlinearになっています。swingは始めと最後をゆっくりと、真ん中を早くするという動きをします。animateはcssだけ設定していればあとは省略可能です。
