作るもの

• マウスオーバーすると、ふわーっと表示が切り替わるボタン。
• 画像を二枚重ね、上の画像の透明度を変化させて表示を切り替える。

こういったUIにあたるエフェクトは好みが別れる気がしますが、
個人的にはリッチな感じがして結構好きです。

HTML

<div id="demo" class="fadeButton">
    <a href="#">FadeButton</a>
</div>

基本となるCSS

#demo {
    display: block;
    width: 135px;
    height: 135px;
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url(default.png);
}

#demo a {
    display: block;
    width: 135px;
    height: 135px;
    text-indent: -9999px;
    overflow: hidden;
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url(hover.png);
}

まずはCSS3のTransitionsで

Transitionsを使うと恐ろしく簡単なコードで実現できちゃいます。

.fadeButton a {
    opacity: 0;
    -webkit-transition: opacity .5s linear;
}

.fadeButton a:hover {
    opacity: 1;
    -webkit-transition: opacity .5s linear;
}

ね、簡単でしょう？（ボブ

が、現在はまだサポートしているブラウザは少ないので、
サポート外のブラウザについてはJavaScriptに頼らざるを得ません。

Transition非対応の環境の為のJavaScriptを用意する

Transition非対応のブラウザ用に、JavaScriptによるフォールバックを用意します。
判別には先日紹介した「head.js」を使用。

CSSの:hoverスタイルを上書き

非対応の場合の:hoverスタイルを無効にしておきます。
Transitions非対応な場合は、head.jsが
“no-csstransitions”をhtml要素のclassに追加してくれるので
こんな感じで。

.no-csstransitions .fadeButton a:hover{
    opacity:0;
}

JavaScriptでフェードイン/アウトさせる

jQueryを使った次のようなコードで、
大体似たようなエフェクトを付加させられます。

(function ($) {
    if (!head.transitions) { // head.jsでTransitions対応を判別
        $(".fadeButton").each(function () {
            var self = $(this);
            self.bind({
                mouseover: function (e) {
                    self.children("a").stop().animate({
                        opacity: 1
                    }, 500);
                },
                mouseout: function (e) {
                    self.children("a").stop().animate({
                        opacity: 0
                    }, 500);
                }
            });
        });
    }
})(jQuery);

デモ＆ファイナルコード

JS/CSSでふわりとフェードするボタンをつくる – jsdo.it – Share JavaScript, HTML5 and CSS

注意！

IEで透過PNGを使ってフェードしようとすると不具合が生じるので注意。
DD_belatedPNG等を使って回避する必要があります。
» IEの透過PNG+opacityの不具合を治すメモ | Mach3.laBlog