Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts

    jQuery - animated image swap

    I'm trying to animate a simple image swap but it's not quite working right. Details below, here's my code thus far:

    Code:
    	$('#zoom_control a').click(function(){
    		var oImg = $('.current_page').find('img');
    		oImg.animate({opacity: 0}, 1000, '',function(){
    			var sOldSrc = oImg.attr('src');
    			if (sOldSrc.indexOf("_zoom.png") > 0){
    				sNewSrc = sOldSrc.replace("_zoom.png", ".png");
    				$(this).html('Zoom out');
    			}else{
    				sNewSrc = sOldSrc.replace(".png", "_zoom.png");
    				$(this).html('Zoom in');
    			}
    			oImg.attr('src', sNewSrc);
    			oImg.animate({opacity: 1}, 1000);
    		});
    		return false;
    	});

    So: find the image to be swapped, and animate its opacity down to 0. When the animation finishes, use the callback function to swap the src and animate the opacity back up to 1.

    Simple enough, and I was surprised not to find an existing plugin that does exactly that. If you know of one, you could probably save us both some trouble

    In any case, the problem with this one is that the image src swap seems to screw with the opacity. It's difficult to tell what it's doing exactly, but the image fades out ok, but then flashes back up briefly, then switches immediately to the new image.

    Any ideas?

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Well, I sort of fixed it in the end.. by animating the opacity of the container div instead of the image itself.

  • #3
    New Coder
    Join Date
    Feb 2009
    Location
    Uzbekistan
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I came across this thread while searching for "jquery image swap".

    Thought I would share with you the article I found on jquery image swap, since I already have an account here :)


  •  

    Posting Permissions

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