Q:

Add fade effect to jquery rollover

I've got this little script that accomplishes a rollover by watching for images that contain an _off/_on suffix.  Works great, but what I would like to do is tack on a fade function to polish it off.  Sorry if this is really juvenile (feels like it) :/
I'd love to keep it dead simple like this. 
<script type="text/javascript">
    $(document).ready(function() {
    $("img.rollover").hover(
    function() { this.src = this.src.replace("_off", "_on");
    }, 
    function() { this.src = this.src.replace("_on", "_off");
    });
    });
</script>

A:

$(function(){

    var a = '_off',
        b = '_on';

    $('img.rollover').on({
        'mouseover': function() {
            $(this).fadeOut(500, function() {
                $(this).prop('src', $(this).prop('src').replace(a, b)).fadeIn(500);
            });
        },
        'mouseout': function() {
            $(this).fadeOut(500, function() {
                $(this).prop('src', $(this).prop('src').replace(b, a)).fadeIn(500);
            });
        }
    });​
 });

A sample fiddle
This should work well.