HOw to use fadeIn and FadeOut in Jquery image chnage

Question

I am chnaging the image src onClick event like below

IF the hyperlink is clicked then i need to change the image in a div box

<div id="left_img">
     <img style="float: right;" src="/image/char.gif">
                    </div>

Jquery

$("#left_img img").attr("src","http://www.abc.net/image/2_char.gif");

Now i want that instead of abrupt change of image there should fade out of old image and fadein of new image

How can i do that

Answer 1

$("#left_img img").fadeOut(500, function() {

    $(this).attr("src","http://www.abc.net/image/2_char.gif").fadeIn(500);

});