HOw to use fadeIn and FadeOut in Jquery image change

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

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

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

});