Jquery: FadeIn on image src swap

Question

I have a piece of JQuery script that changes the src of an image on click:

var imgsrc;
$('#thumbs img').click(function(){
imgsrc = $(this).attr('src');
$('#mainphoto img').attr('src', imgsrc);

I am wondering if theres a way to add .fadeIn() to this at all?

I have tried:

$('#mainphoto img').fadeIn().attr('src', imgsrc);

But this does not work.

Can anyone suggest a way to adjust the symantecs to accomodate this?

Answer 1

Try

$('#thumbs img').click(function(){
    var imgsrc = $(this).attr('src');
    $('#mainphoto img').fadeOut(function(){
       $(this).attr('src', imgsrc).fadeIn();
    });
});

Answer 2

Try this

$('#thumbs img').click(function() {
    var imgsrc = $(this).attr('src');

    $('#mainphoto img').fadeOut().attr('src', imgsrc).load(function() {
        $(this).fadeIn();
    });
});

Answer 3

I have done an example in jsFiddle for you.

Basically, what I do is to listen the click event over the image. When the click is performed, I change the display of the current image to none, also change the src of the image to the new one and then do the fadeIn (which restores the display).

The Javascript code is:

$('#image').click(function(){
        $(this).css("display", "none");
        $('#image').attr('src', 'http://www.stat4you.com/theme/0.1.11/images/stat4you.png');
        $("#image").fadeIn("slow");
    })​

In the jQuery documentation page of fadeIn ( here ) there are some other similar examples:

Answer 4

$('#thumbs img').click(function () {
 var imgsrc = $(this).attr('src');
            $('#mainphoto img').fadeOut(function () {
                $(this).attr('src', imgsrc);
                $(this).fadeIn();
            });
        })