jQueryでフェードアウトさせる例を次に示す。
<button id="b1">show</button>
<button id="b2">hide</button>
<img src="portrait.jpg" id="i1" style="display: none">
<script>
$(function(){
$('#b1').click(function(){
$('#i1').show(1000);
});
$('#b2').click(function(){
$('#i1').hide();
});
});
</script>
<button id="b3">show</button>
<img src="portrait.jpg" id="i2" style="display: none">
<script>
$(function(){
$('#b3').click(function(){
$('#i2').show(function(){
$('#i2').hide();
});
});
});
</script>
| キー | プロパティ |
|---|---|
| duration | アニメーションの再生時間 |
| easing | トランジションに使用するイージング関数 |
| queue | アニメーションをエフェクトキューに入れるかどうかを示すブール値 |
| step | 各アニメーション要素の各アニメーションプロパティに対して呼び出される関数 |
| progress | アニメーションの各ステップの後に呼び出される関数 |
| complete | アニメーションが完了した時点で呼び出される関数 |
| start | アニメーションが始まるときに呼び出される関数 |
| done | アニメーションが完了するときに呼ばれる関数 |
| fail | アニメーションが完了しなかったときに呼ばれる関数 |
| always | アニメーションが完了したとき、または完了せずに停止したときに呼ばれる関数 |
<button id="b4">show</button>
<img src="portrait.jpg" id="i3" style="display: none">
<script>
$(function(){
$('#b4').click(function(){
$('#i3').show({
duration: 1000,
complete: function(){
$('#i3').hide();
}
});
});
});
</script>