'slow' 又は 'fast' で指定する。
| 値 | 消えるまでの時間 |
|---|---|
| fast | 200ミリ秒 |
| デフォルト値 | 400ミリ秒 |
| slow | 600ミリ秒 |
| 数値 | 指定されたミリ秒 |
jQueryでフェードアウトさせる例を次に示す。
<button id="b1">fadeOut</button>
<button id="b2">show</button>
<img src="portrait.jpg" id="i1">
<img src="portrait.jpg" id="i2">
<script>
$('#b1').click(function() {
$('#i1').fadeOut('slow');
$('#i2').fadeOut('fast');
});
$('#b2').click(function() {
$('#i1').show();
$('#i2').show();
});
</script>上記HTML及びJavaScriptの実行結果を次に示す。
jQueryオブジェクトのfadeOutメソッドにコールバック関数を指定して、画像のフェードアウトが完了したらフェードインする例を以下に示す。
<img src="portrait.jpg" id="i3">
<script>
const e = $('#i3')
e.click(function() {
e.fadeOut(function(){
e.fadeIn()
})
})
</script>
| キー | プロパティ |
|---|---|
| duration | アニメーションの速度 |
| easing | アニメーションの進行速度 |
| queue | アニメーションをエフェクトキューに入れるかどうかを示すブール値 |
| step | 各アニメーション要素の各アニメーションプロパティに対して呼び出される関数 |
| progress | アニメーションの各ステップの後に呼び出される関数 |
| complete | フェードアウトが終わったら呼ばれる関数 |
| start | フェードアウトが始まるときに呼ばれる関数 |
| done | アニメーションが完了するときに呼ばれる関数 |
| fail | アニメーションが完了しなかったときに呼ばれる関数 |
| always | アニメーションが完了したとき、または完了せずに停止したときに呼ばれる関数 |
以下に示す順番でコールバック関数が呼び出される。
- start
- step
- progress
- done/fail/always
- complete
jQueryオブジェクトのfadeOutメソッドにオブジェクトを指定して、画像をゆっくりとフェードアウトさせ、フェードアウトが完了したらフェードインする例を以下に示す。
<img src="portrait.jpg" id="i4">
<script>
const e = $('#i4')
e.click(function() {
e.fadeOut({
duration: 'slow',
complete: function(){
e.fadeIn()
}
})
})
</script>