Add Fading To Simple Slider?

JavaScript
1

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?

$(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);
	}
});
2

Hi there,

Could you post a link to a page where I can see the slider in action?