.fadeTo()

http://api.jquery.com/fadeTo/

CSSのopacity(不透明度)プロパティをフェード処理で変化させます。

.fadeTo( duration, opacity [, callback] ) 1.0追加
.fadeTo( duration, opacity [, easing] [, callback] ) 1.4.3追加
サンプル
デモ

.fadeTo( duration, opacity [, callback] ) 1.0追加

戻り値:jQuery

引数	説明
duration	フェードするアニメーション時間を指定します。
opacity	変化させる不透明度を0～1の値で指定します。
[callback]	アニメーション完了後に実行したい関数を指定します。

.fadeTo( duration, opacity [, easing] [, callback] ) 1.4.3追加

戻り値:jQuery

引数	説明
duration	フェードするアニメーション時間を指定します。
opacity	変化させる不透明度を0～1の値で指定します。
[easing]	アニメーションの変化の種類を指定します。
[callback]	アニメーション完了後に実行したい関数を指定します。

サンプル

画像をゆっくりフェードして透明度50%にするサンプルコードです。

<div id="clickme">
  ここをクリック

<img id="book" src="book.png" alt="" width="100" height="123" />

$('#clickme').click(function() {
  $('#book').fadeTo('slow', 0.5, function() {
    // アニメーション完了後に実行したい処理
  });
});

デモ

1つ目のP要素をクリックすると0.6秒("slow")かけて不透明度33%に変化します。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>
クリックするとフェードします。
</p>

<p>
クリックしてもフェードしません。
</p>
<script>
$("p:first").click(function () {
$(this).fadeTo("slow", 0.33);
});
</script>

</body>
</html>

それぞれのDIV要素はランダムに不透明度が指定され、0.2秒("fast")かけて、フェードします。

<!DOCTYPE html>
<html>
<head>
<style>
p { width:80px; margin:0; padding:5px; }
div { width:40px; height:40px; position:absolute; }
div#one { top:0; left:0; background:#f00; }
div#two { top:20px; left:20px; background:#0f0; }
div#three { top:40px; left:40px; background:#00f; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>And this is the library that John built...</p>

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<script>
$("div").click(function () {
$(this).fadeTo("fast", Math.random());
});
</script>
</body>
</html>