jQuery Change Image src with Fade Effect

I'm trying to create an effect where you click on a thumbnail image, and the link to the thumbnail will replace the main image, but fade it in. This is the code I'm currently using: $(".thumbs a").click(function(e) { e.preventDefault(); $imgURL = $(this).attr("href"); $(".boat_listing .mainGallery").fadeIn(400, function() { $(".boat_listing .mainGallery").attr('src',$imgURL); }); }); This works and replaces the image without a fade effect. What do I need to change to get the fadeIn effect to work? jquery image fade shareimprove this question asked May 12 '11 at 14:19 WebDevDude 3871412

add a comment

4 Answers

activeoldestvotes

up vote67down voteaccepted

You have to make it fadeOut() first, or hide it. Try this : $(".thumbs a").click(function(e) { e.preventDefault(); $imgURL = $(this).attr("href"); $(".boat_listing .mainGallery") .fadeOut(400, function() { $(".boat_listing .mainGallery").attr('src',$imgURL); }) .fadeIn(400); }); It should fadeOut the image, then change the src when it's hidden, and then fadeIn. Here's a jsFiddle example. shareimprove this answer answered May 12 '11 at 14:34 Sylvain 3,32912029

add a comment

up vote29down vote

I thing instead of using FadeIn and fadeOut, its better to use fadeTo functionality as fadeIn and fadeOut created a time gap between them for few micro-seconds. I have used above code from Sylvain : thanks to him $("#link").click(function() { $("#image").fadeTo(1000,0.30, function() { $("#image").attr("src",$("#link").attr("href")); }).fadeTo(500,1); return false; }); shareimprove this answer edited Aug 6 '13 at 10:03 ComFreek 20.9k1271124 answered May 23 '13 at 12:36 Sandeep Pal 1,282912

I had the same issue; thanks for this fix. – John 'Mark' Smith Apr 15 '14 at 15:36 I had issues with making fadeIn/fadeOut work for Firefox. This solution works for all browsers. Thanks! – DIGApr 9 '15 at 17:53 This works better for me. Thanks! – Juni Brosas Jun 18 '15 at 7:24 Yeah, this solution is better, thanks – punov Jan 27 '16 at 8:16 add a comment

up vote0down vote	You cannot fade-in something that is already at 100% alpha :) In other words, you either fade it out or hide it, and then fade it in. I made this example, basically, I hide it and then fade it: http://jsfiddle.net/uGFMt/ shareimprove this answer answered May 12 '11 at 14:34 jackJoe 8,86483858
	add a comment

up vote0down vote

I reproduced the given samples above. It gives a strange flickering, which I found that it waits for image to load after it's opacity is restored to 1. I modified the code by Sandeep. $("#link").click(function() { $("#image").fadeTo(1000,0.30, function() { $("#image").attr("src",$("#link").attr("href")); $("#image").on('load', function(){ $("#image").fadeTo(500,1); }); }); return false; });` shareimprove this answer