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¥
完了にする!
解説