Question

我有这个脚本，允许用户点击更改上面主图像的缩略图。

$('#thumbs img').first().addClass('activeThumbnail');
$('#thumbs').delegate('img', 'click', function () {
    $('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
    $('#thumbs img').removeClass('activeThumbnail');
    $(this).addClass('activeThumbnail')
});

第1行，第4行和最后一行涉及突出显示当前显示为主图像的缩略图，因此第2行和第3行以及图像交换功能的面包和黄油。

我真的想稍微改变它以便下一个正在显示的图像稍微消失而不是立即消失，我已经玩过各种各样的地方添加.fadeIn但无济于事。

如果你需要这里的HTML，那就是：

<div id="bannerInner">
    <!--main image-->
    <div id="mainImage">
        <img id="largeImage" src="Images/banner/banner1_large.jpg">
        <img src="Images/banner/banner2_large.jpg">
        <img src="Images/banner/banner3_large.jpg">
        <img src="Images/banner/banner4_large.jpg">
        <img src="Images/banner/banner5_large.jpg">
        <img src="Images/banner/banner6_large.jpg">
        <img src="Images/banner/banner7_large.jpg">
    </div>
    <!--main image-->
</div>
<!--/banner inner-->
<!--banner filmstrip-->
<div id="bannerStrip">
    <!--thumbnail images-->
    <div id="thumbs">
        <ul class="carousel">
            <li>
                <img src="Images/banner/banner1_thumb.jpg" />
            </li>
            <li>
                <img src="Images/banner/banner2_thumb.jpg" />
            </li>
            <li>
                <img src="Images/banner/banner3_thumb.jpg" />
            </li>
            <li>
                <img src="Images/banner/banner4_thumb.jpg" />
            </li>
            <li>
                <img src="Images/banner/banner5_thumb.jpg" />
            </li>
            <li>
                <img src="Images/banner/banner6_thumb.jpg" />
            </li>
            <li>
                <img src="Images/banner/banner7_thumb.jpg" />
            </li>
        </ul>
    </div>

任何帮助都非常感激：）

GB

Answer 1

您可以使用fadeOut完整功能：

动画完成后调用的函数。

当它发生时，更改图像href和fadeIn它。

代码：

$('#thumbs').delegate('img', 'click', function () {
    var $this=$(this);
    $('#largeImage').fadeOut(1000, function () {
        $('#largeImage').attr('src', $this.attr('src').replace('thumb', 'large'));
        $('#thumbs img').removeClass('activeThumbnail'); //remove class from all thumbnails
        $this.addClass('activeThumbnail'); //add it to the clicked one
        $('#largeImage').fadeIn();
    });
});

演示：http://jsfiddle.net/IrvinDominin/U2yR3/

更新

您最初可以使用css隐藏它们，而不是重叠所有图像：

#mainImage>img{
    display: none;
}
#mainImage>img:first-child {
    display: inline !important;
}

演示：http://jsfiddle.net/IrvinDominin/U2yR3/1/

jQuery淡入下一个图像

1 个答案:

更新