Fading Images with jQuery

I just started using the jQuery javascript framework to replace my home-grown animation functions. It is really helpful in speeding up development and is cross-browser compatible so it also cuts down on QA testing. Below is a little bit of jQuery code for swapping out images:

function imgin () {
	$( '#img-id' ).attr ( { 'src': 	new_img_url } );
	$( '#img-id' ).load ( function () {
		$( '#img-id' ).fadeIn ( 1000 );
	} );
}
$( '#img-id' ).fadeOut ( 200, imgin );

Start by setting a 200 millisecond fadeOut on the current image with a callback to imgin function. imgin sets the src attribute (via the attr method) of the image to load the new image file (via new_img_url variable). Then set a load event on the image to trigger fadeIn after the image is loaded.

Links

docs.jQuery.com/Effects