Advanced Image Fader

[imperium2335]

Hi,

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) {
	clearInterval(interval);
		$('#thumb'+target).mouseenter(function(){
		
			mouseIsOver = 1 ;
		
		})
		$('#thumb'+target).mouseleave(function(){
		
			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)
	}
	
</script>

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!

[DanInMA]

here's a decent jquery crossfade tutorials Ive used before, msight spark some new ideas for you.

http://jqueryfordesigners.com/image-...de-transition/

[imperium2335]

Hi,

Thanks for your idea, but I have already seen this tutorial a while ago and it does not enable me to do what I want to do. I have scoured the net looking for something like what I want and I am yet to find it.