jquery 缩略图库 - 悬停/淡入淡出答案

【问题标题】：jquery thumbnail gallery - hover/fadejquery 缩略图库 - 悬停/淡入淡出
【发布时间】：2012-05-08 16:36:59
【问题描述】：

我一直在努力寻找答案... 我有一系列缩略图，当我滚动它们时，我希望主图像（在单独的 div 中）更改为滚动的缩略图。我是编程新手，但我对使用以下代码获得的基本功能感到满意：

$(document).ready(function() {
    var originalimg = $('.mainImage').attr('src');
    $(".subImage").hover(function() {
        var currentimg = $(this).attr('src');
        $('.mainImage').attr('src', currentimg);
    }, function() {
        $('.mainImage').attr('src', originalimg);
    });
});

我最理想的是添加一些淡入/淡出效果。我确信有更好的方法来实现这一点，但如果有人可以更改我上面的代码以包含一些淡入淡出，我将不胜感激。谢谢大家！

【问题讨论】：

标签： jquery hover fade rollover

【解决方案1】：

这应该可以防止任何闪烁或队列堆积：

var originalimg = $('.mainImage').attr('src');
$(".subImage").hover(function() {
    var currentimg = $(this).attr('src');
    $('.mainImage').fadeOut(function() {
        $('.mainImage').attr('src', currentimg).fadeIn();
    });
}, function() {
    $('.mainImage').fadeOut(function() {
        $('.mainImage').attr('src', originalimg).fadeIn();
    })
});

jsFiddle example.

【讨论】：

【解决方案2】：

通过链接，使用fadeOut() 和fadeIn()

var originalimg = $('.mainImage').attr('src');
$(".subImage").hover(function() {
    var currentimg = $(this).attr('src');
    $('.mainImage')
        .stop()
        .fadeOut()
        .attr('src', currentimg)
        .fadeIn();
}, function() {
    $('.mainImage')
        .stop()
        .fadeOut()
        .attr('src', originalimg)
        .fadeIn();
});

demo

【讨论】：

可能需要在其中添加一些 .stop() 来阻止队列的建立。