「jQuery」animateメソッドで要素の文字を拡大縮小するサンプル
環境
Google Chrome 104.0.5112.80 Windows 10 Home 64bit jQuery 3.6.0
構文
.animate( properties [, duration ] [, easing ] [, complete ] )
アニメーションの動きを追加できます。
書式
$(“セレクタID名").animate({fontSize:’数値px’},アニメーションする時間,関数
使用例
<!DOCTYPE html>
<html>
<body>
<style>
#cft{
height:30px;
width:60px;
background-color:skyblue;
}
</style>
<p><input type="button" id="btnShow" value="表示"></p>
<div id="cft">tt</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$("#btnShow").click(function() {
$("#cft").animate(
{fontSize:'30px'},//文字サイズ変更 文字を縮小する
3000, //アニメーションする時間
function(){console.log("test abc");}//関数alertを呼び出す
)
});
</script>
</body>
</html>
実行結果
「表示」ボタンを押すとdiv要素「cft」の文字が3秒かけて拡大します。
console関数を実行します。