www.webdeveloper.com
Results 1 to 3 of 3

Thread: Advanced Image Fader

  1. #1
    Join Date
    Oct 2010
    Location
    UK
    Posts
    11

    Question Advanced Image Fader

    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:

    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!

  2. #2
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    here's a decent jquery crossfade tutorials Ive used before, msight spark some new ideas for you.

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

  3. #3
    Join Date
    Oct 2010
    Location
    UK
    Posts
    11
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles