Image 图像替换（画廊风格），淡入'；s/淡出'；s

我相信你们都看过这个用以下方法替换图像的演示：

$("#largeImg").attr({ src: largePath, alt: largeAlt });

因此，假设我想在屏幕上更改4个图像，以模拟我正在更改整个“页面”，但避免使用AJAX/PHP或任何图像预加载程序。我现在的代码有一个问题：

<script>
$(document).ready(function(){
    $(".navlink").click(function(){
        var theirname = $(this).attr("name");
        var imagepath = "images/img_"+theirname+".jpg";
        var headerpath ="images/header_"+theirname+".png";
        var textpath = "images/about_"+theirname+".jpg";
        //var lightpath = "images/smallimg_"+theirname+".jpg";
        $("#primeheader").attr({ src: headerpath});
        $("#primetext").attr({ src: textpath}); 
        $("#primephoto").attr({ src: imagepath});
    });
});
</script>

$（文档）.ready（函数（）{
$（“.navlink”）。单击（函数（）{
var theirname=$（this.attr（“name”）；
var imagepath=“images/img_”+theirname+”.jpg”；
var headerpath=“images/header_“+theirname+”.png”；
var textpath=“images/about_“+theirname+”.jpg”；
//var lightpath=“images/smallimg_”+theirname+”.jpg”；
$（“#primeheader”）.attr（{src:headerpath}）；
$（“#primetext”）.attr（{src:textpath}）；
$（“#primephoto”）.attr（{src:imagepath}）；
});
});

当您调用“淡入”、“动画不透明度”或类似的东西时，使用.attr（{src:whatever}）切换图像源总是首先使其可见，即使在使.css visibility none/invisible之后也是如此

我已经尝试过延迟、设置超时等（我试图尽可能多地研究以避免重复发布）

希望这是有意义的，如果太冗长/不清楚，请道歉

---

感谢您的反馈！谢谢

如果使用容器包装所有元素，然后在图像转换期间淡出/淡入容器，会发生什么情况

$('#primeContainer').fadeOut('fast', function() {
    $('#primeheader').attr({ src: headerpath });
    $('#primetext').attr({ src: textpath });
    $('#primephoto').attr({ src: imagepath });
    $(this).fadeIn('fast');
});

---

差不多一年后，答案对我来说也是完美的。谢谢+1.