jQuery image mouseover / mouseout replacement

This plugin takes a standard mouseover / mouseout source replacement on an image and swaps it for a nice jQuery image fade between the two images

(function ($) {
    "use strict";
    $.fn.hoverFade = function () {

        return this.each(function () {

            var $this = $(this), $parent, mOver = $this.attr("onmouseover"), mOut = $this.attr("onmouseout");

            if ((mOver !== undefined) && (mOut !== undefined)) {

                mOver = mOver.replace("this.src=", "").replace(";", "").replace("'", "");
                mOut = mOut.replace("this.src=", "").replace(";", "").replace("'", "");

                $this.removeAttr("onmouseover")
                    .removeAttr("onmouseout")
                    .wrap("<div style='position:relative; display:inline-block; width:" + $this.width() + "px; height:" + $this.height() + "px' />")
                    .attr("style", "position:absolute; left:0; top:0;");

                $parent = $this.parent("div");

                $parent.append("<img class='hoverFadeOver' src='" + mOver + "' />");

                $(".hoverFadeOver", $parent).css({
                    "position": "absolute",
                    "left": "0",
                    "top": "0",
                    "opacity": 0
                });

                $parent.hover(function () {
                    $(".hoverFadeOver", $(this)).animate({
                        "opacity": 1
                    });
                }, function () {
                    $(".hoverFadeOver", $(this)).animate({
                        "opacity": 0
                    });
                });
            }

        });
    };
}(jQuery));

Usage:

<script>
$(function () {
 $('img').hoverFade();
});
</script>

<img src="/myimage.jpg" onmouseover="this.src='/myimage-over.jpg';" onmouseout="this.src='/myimage-over.jpg';" />

Notes: it does currently require that the format of the src in the onmouseover / onmouseout handlers is as above but hey, you get the idea right?