How do I go about adding a fade in and out to this slider? I tried playing around with animate but it didn't seem to help. Should / Do I need to preload the image before I animate it / fade it or something?

Code:
$(document).ready(function () {
	var $next, 
		cycle;
	var i = 0;
	var imgArr = ['1.jpg', '2.jpg', '3.jpg'];
		
	$activeLi = $("#slideshow li:first");
	$activeLi.html('<img src="images/' + imgArr[i] + '" />');
	cycle = setInterval(change_img, 1000);
	
	function change_img(){
		clearInterval(cycle);
		$activeLi.html('<img src="images/' + imgArr[i] + '" />');
		
		i = (i == (imgArr.length - 1)) ? 0 : ++i;
		cycle = setInterval(change_img, 1000);
	}
});