「jQuery」animateメソッドで要素の文字を拡大縮小するサンプル

2022年8月4日

環境

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

jQuery

Posted by arkgame

関連投稿: