「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関数を実行します。