「jQuery」animateメソッドで要素の文字を拡大縮小するサンプル
環境
Google Chrome 104.0.5112.80
Windows 10 Home 64bit
jQuery 3.6.0
Google Chrome 104.0.5112.80
Windows 10 Home 64bit
jQuery 3.6.0
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>
<!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>
<!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関数を実行します。