jquery - jQuery图像在悬停时消失并褪色

Question

我有一系列缩略图，希望在翻转时显示在主图像中。我已经使用悬停功能使该功能正常工作，但是尽管淡入效果很好，但一旦我推出，它就会淡出，但随后主图像完全失去它的 src 并消失。

$(document).ready(function(){   
    var originalimg = $('#imageMain img').attr('src');
    $(".thumb").hover(function(){
        var currentimg = $(this).attr('src');
        $('#imageMain img').fadeIn("slow").attr('src', currentimg);
        },function(){
        $('#imageMain img').fadeOut('slow').attr('src', originalimg);
    });
});

多谢你们。我没有包含 HTML，因为我认为它的引号直截了当发生了什么。

Answer 1

我可能会完全删除图像并在适当的位置添加一个新图像，因为您可以同时淡入它以获得更好的效果！我已经在脑海中写下了这个，所以希望它有效！

   $(document).ready(function(){  
                var originalimg = $('#imageMain img').attr('src');
                $(".thumb").hover(function(){
                    var currentimg = $(this).attr('src');
                    $('#imageMain img').fadeIn("slow").attr('src', currentimg);
                    },function(){
                    $('#imageMain img').fadeOut('slow',function(){$(this).remove()});
                    $("#imageMain").append("<img src='"+originalimg+"'/>").hide().fadeIn("slow");
                });
            });

Answer 2

不是.attr('src', originalimg);但.src = originalimg;

$(document).ready(function(){  
    var originalimg = $('#imageMain img').attr('src');
    $(".thumb").hover(function(){
        var currentimg = $(this).attr('src');
        $('#imageMain img').fadeIn("slow").src = currentimg;
        },function(){
        $('#imageMain img').fadeOut('slow').src = originalimg;
    });
});