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();
});

demo

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 example

jquery缩略图库 - 悬停/淡出

2 个答案: