画像をフェードで切り替えるロールオーバーを、jQueryでシンプルに実現したサンプルを見つけたのでメモ。

ナビゲーション画像などをフェードで切り替えるJavaScriptはいくつかありますが、その中から「いいな」と思うものがあったので紹介します。

jQueryを使ったシンプルなコードで画像をフェード

ナビゲーションをフェードで切り替え | kojilow Blog

通常の画像の背景に、cssでオンマウス時の画像を配置。jQueryで画像をフェードさせることで、ロールオーバーを実現しています。こういった動きがひとつ加わるだけで、ロールオーバーにJavaScriptを使う意義を感じますね。

また、画像の下に背景画像を敷くのは、cssのみでロールオーバーを実装する際にも使われる手法ですが、imgタグではなく、それを包括する親要素に背景を設定するのがポイントです。

あと、全然関係ないけど、こちらの作者さんが、僕と同じ栃木県在住っぽいのでドキドキします。

アマゾンのサーバでエラーが起こっているかもしれません。
一度ページを再読み込みしてみてください。

僕は喜連川の温泉パンが好物です。