解 説

マウスホバーでボタンなどの画像をフワッとクロスフェードさせたいという相談が多いので、何種類かのアプローチと失敗例などを書きました。

  1. CSS3でクロスフェードさせるサンプル
  2. jQueryでimgタグの画像をクロスフェードさせる(成功例)
  3. jQueryでCSSのbackground-mageをクロスフェードさせる(完成形)

CSSを使用した例

hover疑似クラス

マウスホバーはCSSでの設定が簡単です。
CSSでは:hover擬似クラスを使用します。この疑似クラスはa要素以外にも使用できます。
また、a要素に適用させる場合には、順番が大事です。
LVHA の順 です :link — :visited — :hover — :active
LOVE HEARTで覚えるとよいらしいです。(笑)

hover擬似クラスのサンプル
HTML

CSS

CSS3 transitionでクロスフェード

上のサンプルでは単純に画像が入れ替わるのですが、これにフワッとクロスフェードをさせるにはCSS3のtransitionを使用します。

CSS3でクロスフェードさせるサンプル
IE8以下は当然使えないですが、firefoxもbackground-imageはアニメーションをしません。background-colorはアニメーションします。

CSSによるクロスフェードで画像を入れ替える方法は簡単ですが、対応してないブラウザ対策が問題となります。

transitionプロパティ
マウスホバーしたときなど時間をかけて変化をさせることができます。

  1. アニメーションさせるCSSプロパティ
    背景色、文字のサイズなど、どのCSSプロパティを変化させるか
    transition-property: background;
  2. アニメーションしている時間の長さ
    Aの状態からBの状態に変化するのに何秒かけるか
    transition-duration:1s;
  3. アニメーションの速度変化(イージング)
    始めは素早く動くけれども、変化の終盤はゆっくり動くなど、変化する過程にどう抑揚を付けるか
    transition-timing-function:ease-out;
  4. アニメーションを開始するまでの時間
    マウスオーバなどのアクションがあってから、何秒経過してからアニメーションを始めるか
    transition-delay:0.5s;
  5. ショートハンドの書き方
    transition:background 1s ease-out 0.5s;

jQueryを使用した例

今度はimgタグで画像を置いてjQueryで入れ替える方法です。
jQueryを使うと簡単に属性を入れ替えることができます。イベントに応じて画像を変更するのはお手のものです。
attr()は指定した属性の値を取得したり、変更することのできるメソッドです。jQueryオブジェクトで使用することができます。引数が1つの場合は値を取り、2つの場合は値を変更します。

引数の数で役割の違うメソッドの解説はこちら

imgタグのsrc属性を入れ替える方法

imgのsrc属性をattr()を使用して変更し、画像を入れ替えることを試してみました。
imgタグの画像を入れ替えるサンプル
HTMLコード

jQueryコード

hoverイベントで、imgタグのsrc属性をjQueryで入れ替える仕組みです。
hoverイベントの書き方は以下のとおりです。

汎用性を高めたimgタグのsrc属性を入れ替える方法

画像のファイル名を変更しても使えるように汎用性を高めたjQueryの書き方は次にようになります。

replaceを使用して汎用性を高めたサンプル

replace() はJavaScriptのメソッドです。

str.replace(“検索文字列”,”置換文字”);

fadeToを使用してクロスオーバーに挑戦

fadeToで一旦透明度を付けてattrで画像を入れ替えることを試してみた。
クロスオーバーさせるためにfadeToを使用したサンプル

なんだか動きが不自然です。src属性を変更して画像を入れ替える方法ではクロスフェードは難しそうです。

jQueryでimgタグの画像をクロスフェードさせる(成功例)

根本的に考え方を変えます。
HTMLのimgタグを2つ用意してきれいに重ね、上の画像をフェードアウトすればうまくいきそうです。
2枚の画像をぴったりと重ねるにはそれぞれに、position:absoluteを設定してleft,topなどを指定しないと2つはきれいに重なります。ここまでCSSで設定後jQueryでフェードアウトします。
imgタグで画像を表示したものをクロスフェードさせる方法はこれが一番良さそうです。

クロスフェードしながら画像が替わるサンプル
HTMLコード

CSSコード

jQueryコード

CSSで背景画像を設定して背景画像を変える方法

今度はimgタグを使用せずにCSSのbackground-imageを変更して画像を変更する方法です。
これは先の例のattr()を使用して画像を変更する例と同じような考え方です。
attr()の代わりにcss()を使用しただけです。この方法も画像は入れ替わりますがクロスフェードは難しいです。

background-imageを使用したサンプル
HTMLコード

CSSコード

jQueryコード

汎用性を高めたCSSの背景画像を変える方法

background-imageを使用し、更に汎用性を高めたサンプル

classを付けたり外して変更する方法

これはjQueryでclassを付けたり外したりして、CSSの設定で切り替える方法です。
classを付けたり外したりする方法
HTMLコード

CSSコード

jQueryコード

入れ子構造のタグにCSSで背景を設定してopacityで設定

ナビゲーションボタンなどa要素が入れ子状態であると仮定してクロスフェードを実現しました。
a要素の代わりにspan要素を使用しても同じ結果を得ることができます。

クロスフェードしながらCSSで画像を変更するサンプル

HTMLコード

CSSコード

jQueryコード

jQueryでCSSのbackground-mageをクロスフェードさせる(完成形)

素早く何度もイベント対象にホバーしても不具合を起こさないようにstop()を使用した完成形です。
完成のコード
HTMLコード

CSSコード

jQueryコード