フェード付きの画像ロールオーバーを作ってみた

画像のロールオーバーでフェードエフェクトがついたものを書いてみた。
ロールオーバー用のクローン画像を生成して元画像の後ろに配置して、元画像をフェードすることで効果を出します。

汎用性が出るように画像と親要素に直接CSSが付加されるようにしています。

(function(window,namespace,$){

    window[namespace] = {

        init: function(el,suffix,time){
            var el = el || '.imgOver';
            var suffix = suffix || '_o';
            if(time === undefined){
                var time = 200;
            };

            this.setImg(el,suffix);
            this.event(el,suffix,time);
        },

        event: function(el,suffix,time){
            var that = this;
            $(el).on({
                mouseover: function(){
                    var self = $(this);
                    self.fadeTo(time,0);
                },
                mouseout: function(){
                    var self = $(this);
                    self.fadeTo(time,1);
                }
            });
        },

        setImg: function(self,suffix){
            $(self).each(function(){
                var $baseImg = $(this);
                var imgWidth = $baseImg.width();
                var imgheight = $baseImg.height();
                var $parentEle = $baseImg.parent();
                var src = $baseImg.attr('src');
                var overSrc = src.replace(/^(.+)(\.[a-z]+)$/, '$1' + suffix + '$2');
                var overImg = $baseImg.clone().attr('src', overSrc).css({
                    position: 'absolute',
                    left: 0,
                    top: 0,
                    zIndex:10
                }).addClass('on');

                $baseImg.css({
                    position: 'absolute',
                    left: 0,
                    top: 0,
                    zIndex:20
                });
                $parentEle.css({
                    position: 'relative',
                    width: imgWidth,
                    height: imgheight
                }).append( overImg );
            });
        }
    };

})(this,'imgOverWithFade',jQuery);

実行

$(function(){
    imgOverWithFade.init('.sample', '_o', 200);
});

引数に'ターゲット','ロールオーバー後の画像の接尾語','フェードのスピード'を設定します。
デフォルト値は'.imgOver','_o','200'。

注意点

画像にposition: absolute;をつけて重ねるので、親要素がないと画像がおかしなところに表示されます。

<li><img src="hogehoge.png" width="240" height="110" alt="" class="sample" /></li>

とか

<div><img src="hogehoge.png" width="240" height="110" alt="" class="sample" /></div>

のようにimgを親要素で囲って下さい。