リンク画像をロールオーバーでクロスフェードさせる

jQuery ｖ1.10.2で動いています。

aタグに含まれた画像のフェードタイプのロールオーバーです。画像のファイル名の末尾には「_on」「_off」をつけておきます。aタグ内に画像もテキストも含まれる場合に便利かと思います。スマホの場合はロールオーバーの意味がなくなるのでOFFに。

追記：2015/04/10
レスポンシブの環境下で使った場合にうまくサイズが取得出来ていなかったので修正。

$(function(){

    if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
        //スマホはOFF
    }else{    
    
        //ロールオーバー
        var h_on_sec = 500;
        var h_of_sec = 200;
        $("a").each(function(){
            if($(this).find("img[src*='_off.']").length){
                obj = $(this).find("img[src*='_off.']");
                url = obj.attr("src").replace("_off.", "_on.");
                cls = $(this).find("img").attr("class");

                img = $("<img>");
                img.attr("src", url);
                img.attr("width", obj.width());
                img.attr("height", obj.height());
                img.css({
                    "position":"absolute",
                    "opacity":0
                });
                img.addClass("on_img");
                if(cls != null) img.addClass(cls)
                
                if(jQuery.support.checkOn && jQuery.support.htmlSerialize && !window.globalStorage){ //Operaバグ対策
                    obj.before("<div style=\"display:inline-block;\" class=\"on_img\" ></div>");
                }
                obj.css("position", "relative").before(img);

                $(this).hover(
                    function(){
                        obj = $(this).find("img:not('.on_img')");
                        img = $(this).find("img.on_img");
                        img.attr("width", obj.width());
                        img.attr("height", obj.height());
                        img.stop(true, true).animate({opacity:"1"}, h_on_sec);
                        obj.stop(true, true).animate({opacity:"0"}, h_on_sec);
                    },
                    function(){
                        $(this).find("img.on_img").stop(true, true).animate({opacity:"0"}, h_of_sec);
                        $(this).find("img:not('.on_img')").stop(true, true).animate({opacity:"1"}, h_of_sec);
                    }
                );
                
            }
        });
    
    }

});

良さそうなのが無かったので書いてみました。