jQuery Change Image src with Fade Effect

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.

Edit: you can find a more recent & better solution in Sandeep Pal's anwser

I thing instead of using FadeIn and fadeOut, its better to use fadeTo functionality asfadeIn 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;});

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;});`