使用jQuery淡入淡出画廊中的图像更改

我不确定我的谷歌搜索技能是否已经过时，但我一直在jQuery中遇到一些问题，我认为这是一件简单的事情，但我不能正确地使用它。发生的事情是，图像一是一个大的图像。当我将鼠标悬停在其他图像上时，大图像会通过切换类属性进行更改，但我也希望它在转换过程中淡入，但只保留图像缩略图。我有一种感觉，我离这很近，但我就是想不出来

以下是jQuery代码：

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

以下是HTML代码：

            <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>

---

我认为错误在jQuery代码第5行

而不是

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

使用属性属性获取src值：

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

或

---

太棒了，终于开始工作了！唯一的问题是，当你不再将鼠标悬停在图像上时，它也会消失，有没有办法覆盖它？也许最好不要使用hover-event，而是使用mouseenter-event。每次移动鼠标时都会调用hover-event，mouseenter只在您进入元素时调用一次，这是一个很好的观点。非常感谢您的帮助D

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