jQuery API の fadeTo( duration, opacity ) は、指定した要素を、opacity に指定した不透明度になるまで、duration に指定した速度で、透明度を徐々に変更するメソッド。
記述方法
jQuery( セレクター ) . fadeTo( 速度, 不透明度 );
「セレクター」の要素を、「不透明度」に指定した不透明度になるまで、「速度」に指定した速度で、透明度を徐々に変更する。
「速度」は、ミリ秒単位の数字、もしくは、'slow'、'normal'、'fast' の文字列で指定する。
「不透明度」は、0～1の整数及び小数で指定する。例えば、「0.25」は、25%の不透明度を表す。
実装例（サンプル）
fadeTo( 2000, 0.25 ) / fadeTo( 2000, 1 ) ボタンをクリックすると:
不透明度が「0.25」になるまで、
２秒間のアニメーションでフェードアウト。
もしくは、
不透明度が「1」になるまで、
２秒間のアニメーションでフェードイン。
fadeTo( 'fast', 0.25 ) / fadeTo( 'fast', 1 ) ボタンをクリックすると:
不透明度が「0.25」になるまで、
速いアニメーションでフェードアウト。
もしくは、
不透明度が「1」になるまで、
速いアニメーションでフェードイン。
実装例（サンプル）の動作について
- 「 fadeTo( 2000, 0.25 ) / fadeTo( 2000, 1 ) 」ボタンをクリックすると、「fadeTo( 2000, 0.25 ) / fadeTo( 2000, 1 ) ボタンをクリックすると: 」の下に黄色のボックスを、不透明度が「0.25」になるまで、２秒間のアニメーションでフェードアウトする。「 fadeTo( 2000, 0.25 ) / fadeTo( 2000, 1 ) 」ボタンを再度クリックすると、黄色のボックスを、不透明度が「1」になるまで、２秒間のアニメーションでフェードインする。
- 「 fadeTo( 'fast', 0.25 ) / fadeTo( 'fast', 1 ) 」ボタンをクリックすると、「fadeTo( 'fast', 0.25 ) / fadeTo( 'fast', 1 ) ボタンをクリックすると: 」の下に黄色のボックスを、不透明度が「0.25」になるまで、速いアニメーションでフェードアウトする。「 fadeTo( 'fast', 0.25 ) / fadeTo( 'fast', 1 ) 」ボタンを再度クリックすると、黄色のボックスを、不透明度が「1」になるまで、速いアニメーションでフェードインする。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-fadeTo' ) . toggle(
function() {
jQuery( '#jquery-api-fadeTo-contents' ) . fadeTo( 2000, 0.25 );
},
function() {
jQuery( '#jquery-api-fadeTo-contents' ) . fadeTo( 2000, 1 );
}
);
jQuery( '#jquery-api-fadeTo-fast' ) . toggle(
function() {
jQuery( '#jquery-api-fadeTo-fast-contents' ) . fadeTo( 'fast', 0.25 );
},
function() {
jQuery( '#jquery-api-fadeTo-fast-contents' ) . fadeTo( 'fast', 1 );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-fadeTo' ) . toggle(
function() {
jQuery( '#jquery-api-fadeTo-contents' ) . fadeTo( 2000, 0.25 );
},
function() {
jQuery( '#jquery-api-fadeTo-contents' ) . fadeTo( 2000, 1 );
}
);
jQuery( '#jquery-api-fadeTo-fast' ) . toggle(
function() {
jQuery( '#jquery-api-fadeTo-fast-contents' ) . fadeTo( 'fast', 0.25 );
},
function() {
jQuery( '#jquery-api-fadeTo-fast-contents' ) . fadeTo( 'fast', 1 );
}
);
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-fadeTo-contents,
#jquery-api-fadeTo-fast-contents {
padding: 10px;
width: 400px;
color: red;
background-color: yellow;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
<!--
#jquery-api-fadeTo-contents,
#jquery-api-fadeTo-fast-contents {
padding: 10px;
width: 400px;
color: red;
background-color: yellow;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
HTML
<p><button id="jquery-api-fadeTo">fadeTo( 2000, 0.25 ) / fadeTo( 2000, 1 )</button></p>
<p>fadeTo( 2000, 0.25 ) / fadeTo( 2000, 1 ) ボタンをクリックすると:</p>
<div id="jquery-api-fadeTo-contents">
<p>不透明度が「0.25」になるまで、<br />２秒間のアニメーションでフェードアウト。</p>
<p>もしくは、</p>
<p>不透明度が「1」になるまで、<br />２秒間のアニメーションでフェードイン。</p>
</div>
<p><button id="jquery-api-fadeTo-fast">fadeTo( 'fast', 0.25 ) / fadeTo( 'fast', 1 )</button></p>
<p>fadeTo( 'fast', 0.25 ) / fadeTo( 'fast', 1 ) ボタンをクリックすると:</p>
<div id="jquery-api-fadeTo-fast-contents">
<p>不透明度が「0.25」になるまで、<br />速いアニメーションでフェードアウト。</p>
<p>もしくは、</p>
<p>不透明度が「1」になるまで、<br />速いアニメーションでフェードイン。</p>
</div>
<p>fadeTo( 2000, 0.25 ) / fadeTo( 2000, 1 ) ボタンをクリックすると:</p>
<div id="jquery-api-fadeTo-contents">
<p>不透明度が「0.25」になるまで、<br />２秒間のアニメーションでフェードアウト。</p>
<p>もしくは、</p>
<p>不透明度が「1」になるまで、<br />２秒間のアニメーションでフェードイン。</p>
</div>
<p><button id="jquery-api-fadeTo-fast">fadeTo( 'fast', 0.25 ) / fadeTo( 'fast', 1 )</button></p>
<p>fadeTo( 'fast', 0.25 ) / fadeTo( 'fast', 1 ) ボタンをクリックすると:</p>
<div id="jquery-api-fadeTo-fast-contents">
<p>不透明度が「0.25」になるまで、<br />速いアニメーションでフェードアウト。</p>
<p>もしくは、</p>
<p>不透明度が「1」になるまで、<br />速いアニメーションでフェードイン。</p>
</div>