I would like to animate a number of thumbnails in a gallery. My idea is to have each thumb transit to another thumb, i.e. you put your mouse over a thumbnail, and it slowly fades to a different image.

I have spent a lot of time trying to get this to work, using exhaustive combinations of fadeToggle() and stop(false, false) etc etc and I still can't get a smooth effect.

I have created my own fade engine using a variable that drives the opacity of the image that fades in/out over the other image.

My issue is that I would like to get this into a function, as it works beautifully for one image, or if you simply duplicate the code for other thumbnails. The problem is there could be up to 32 thumbnails on the page, which means a lot of repeated code.

Here is my code:

<script type="text/javascript">
	$('#trans1').css('opacity', 0.01) ; // Set starting opacity for thumbnail.
	var fader = 0.00 ;
	var interval = '' ;
// For this example 'target' can be substituted for 1.

	function fadeControl(target) {
			mouseIsOver = 1 ;
			mouseIsOver = 0 ;
		interval = setInterval(function(){
			if(mouseIsOver == 1)
				fader = fader += 0.01 ;
			else if(mouseIsOver == 0)
				fader = fader -= 0.01 ;
			if(fader < 0.00) fader = 0.00 ;
			if(fader > 1.00) fader = 1.00 ;
			$('#trans'+target).css('opacity', fader) ;
			$('#ceee').html(fader.toFixed(2)) ;
		}, 10)
You can see it in action here: www.sweetart.co.uk/2012/cake-gallery.php (hover over the pig thumbnails )

As you can see, there appears to be a problem with the timer where if you mouse over one image and then the next quickly, it interrupts the animation of the previous.

Any thoughts and ideas are most welcome!