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

Question

我一直在努力寻找答案……我有一系列缩略图，当我翻阅它们时，我希望主图像（在单独的 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);
    });
});​

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

Answer 1

通过链接，使用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();
});​

演示

Answer 2

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

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 示例。