jQuery 「エフェクト」フェード効果
.feadeIn()は、対象要素に対し徐々に表示を濃くするアニメーション効果を設定します。.fadeOut()は、その反対に徐々に表示を薄くします。.fadeTo()は第２引数で指定した「透明度」の値まで、徐々にfadeIn/fadeOutを行います。これらの関数の第1引数は、アニメーション効果にかける時間です。「fast（速く）」「slow（遅く）」といった文字列での指定の他、ミリ秒単位の数値でも指定できます。例えば、数値を「1000」としたslowは600ミリ秒を指定したのと同じになります。なお、fastは200ミリ秒、slowは600ミリ秒を指定したのと同じになります。.fadeIn()及びされたものとして実行されます。.fadeTo()だけは効果時間省略できません。第2引数には、要素が最終的に到達すべき透明度を、0から1の間の数値で指定します。最後の引数は、アニメーションが完了したときに実行されるコールバック関数です。
書式
$("対象要素").fadeIn([効果時間],[コールバック]);
$("対象要素").fadeOut([効果時間],[コールバック]);
$("対象要素").fadeTo([効果時間],透明度,[ コールバック ]);$('img').fadeIn('fast', function(){
alert('フェードインしました');
});
$('img').fadeOut('slow', function(){
alert('フェードアウトしました');
});
$('img').fadeTo(400, 0.5, function(){
alert('フェードトゥしました');
});サンプル
フェード効果。clickボタンをクリックするとdivで設定したstyleの背景が3000ミリ秒かけて浮かび上がるように表示され、spanタグに記述した「Hello World!」が100ミリ秒かけて透明度0.5の状態で表示されます。
<html>
<head>
<meta charset="UTF-8">
<title>テストページ</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<style>
div{
position: absolute;
width: 400px;
height: 65px;
font-size: 36px;
text-align: center;
color: #fff;
background:blue;
padding-top:25px;
top:0;
left:0;
display: none;
}
span{
display: none;
}
</style>
</head>
<body>
<button>click</button>
<div><span>Hello World!</span></div>
<script>
$(document).ready(function(){
$("button").on('click' ,function(){
$('div').fadeIn(3000,function(){
$('span').fadeTo(100,0.5);
});
return false;
})
});
</script>
</body>
</html>
