add fade effect to image swap

I'm looking for a solution to add a nice fade effect to a few images when I swap them. I'm new to jquery and have seen many solutions but only for a single image instead of multiples ones.Tried the z-index technique but that placed all the images on top of each other.

I'm using this jquery code to swap the images.

$(document).ready(function(){



// jQuery image change on hover
$("ul#aside li a img")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "over.png";
        $(this).attr("src", src);
    })
    .mouseout(function() {
        var src = $开发者_Go百科(this).attr("src").replace("over", "");
        $(this).attr("src", src);

    });
});

Any help or tips is much appreciated.

try something like this

  $(this).hide();
  $(this).attr("src", src);
  $(this).fadeIn();

.fadeOut() will fade an image out

$("ul#aside li a img")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "over.png";
        var $this = $(this);
        $this.fadeOut("fast", function() {
          $this.attr("src", src).fadeIn("slow");
        });
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("over", "");
        var $this = $(this);
        $this.fadeOut("fast", function() {
          $this.attr("src", src).fadeIn("slow");
        });

    });
});