「jQuery」.fadeTo()で要素のフェード処理を行うサンプル
環境
jQuery 3.6.0
Google Chrome 98.0.4758.102
書式
$('セレクタ名).fadeTo(引数1, 引数2);
引数1にはアニメーションのスピードを文字列または、数値で指定します。
文字列："slow", “normal", “fast"、 数値：ミリ秒
引数2には透過率を指定します。
0.0：全透過～1.0：透過なし
使用例
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
$('#btnS').click(function(){
// normalスピード:透過率を0.3にする
$('#cft').fadeTo("normal", 0.3);
});
$('#btnD').click(function(){
//slowスピード:透過率を1.0にする
$('#cft').fadeTo("slow", 1.0);
});
});
</script>
<style>
#cft{
background-color:skyblue;
}
</style>
</head>
<body>
<div id="cft">要素のフォード処理サンプル</div>
<p><input type="button" id="btnS" value="透過1"></p>
<p><input type="button" id="btnD" value="透過2"></p>
</body>
</html>
実行結果
「透過1」ボタンを押すと、要素div部分の透過率が0.3になります。
「透過2」ボタンを押すと、要素div部分の透過率が１になります。