第7回 エフェクト編：連載：jQuery逆引きリファレンス（11/19 ページ）

jQueryの大きな特徴の1つは簡単なコードで実現可能なさまざまなアニメーションだ。アニメーション用メソッドをまとめた、すぐに役立つ18本を一挙公開。

[山田祥寛（http://www.wings.msn.to/），著]

連載目次

　fadeToメソッドは、現在の要素（セット）を指定されたopacity（透明度）まで変化させます。引数opacityには0（透明）〜1（非透明）の間の値を指定します。

　変化にかける時間は、引数speedで指定できます。ミリ秒単位の時間、または、あらかじめ決められた値として、slow、normal、fastのいずれかを指定できます。引数fncは、フェードアウトが完了したときに実行するコールバック関数を表します。

　具体的な例も見てみましょう。以下は、ページ・ロード時にアイコン画像を5秒（＝5000ミリ秒）かけて、透明度0.5（半透明）まで変化させる例です。

<script type="text/javascript">

$(function() {

  // <div>要素の内容を5000ミリ秒かけて半透明に
  $('div').fadeTo(5000, 0.5);
});

</script>

  ……中略……

<div>
  <img src="http://www.wings.msn.to/books/978-4-7981-1957-1/978-4-7981-1957-1_logo.jpg" alt="ASP.NET" />
</div>

リスト113 アイコン画像を5秒かけて半透明に変化（FadeTo.html）
このHTMLを実際にブラウザで開く

ブラウザで開く

5秒後

リスト113の実行結果