Fading in and out using jQuery on image change in a gallery

Question

I'm not sure whether my googling skills are rusty, but I've been having trouble with what I assume to be a simple thing in jQuery, but I can't get it right. What happens is that image one is a big image. when I hover over the others, the big image changes by switching class attributes, but I also want it to fade in during transition, but leaving the image thumbnail alone. I have a feeling I'm this close, but I just cant figure it out.

Here is the jQuery code:

$(document).ready(function () {
    $('#inlinethumbs1 div a img').hover(function () {
        var $this = $(this);
        $('#previewheight1 img').fadeOut(function(){
            $('#previewheight1 img').attr('src', $this.src).fadeIn(); 
        });
    });
});

Here is the HTML code:

            <div class="wrapper">
                <div class="previewposition">
                    <div id="previewheight1">
                        <img src="Image1.png" alt="" class="previewthumb">
                    </div>
                    <div id="inlinethumbs1">
                        <div class="float">
                            <a href="Image1.png"><img src="Image1.png" alt="" class="thumb"></a>
                        </div>
                        <div class="float">
                            <a href="Image2.png"><img src="Image2.png" alt="" class="thumb"></a>
                        </div>
                        <div class="float">
                            <a href="Image3.png"><img src="Image3.png" alt="" class="thumb"></a>
                        </div>
                    </div>
                </div>
            </div>

Answer 1

I think the error is in jQuery code line 5

instead of

$('#previewheight1 img').attr('src', $this.src).fadeIn(); 

get src value using attr of prop :

$('#previewheight1 img').attr('src', $this.attr('src')).fadeIn(); 

or

$('#previewheight1 img').attr('src', $this.prop('src')).fadeIn();  // use prop as of jQuery 1.6