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

不是.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;
    });
});

Answer 2

我可能只是完全删除了图像并添加了一个新图像，然后你可以同时淡入它以获得更好的效果！我把它写在了我的头顶，所以希望它有效！

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

jQuery图像在淡入淡出时消失

2 个答案: