图片替换（画廊样式）淡入的/淡出的(Image Replacement (gallery style

我敢肯定，你都看到了使用该图片替换的这个演示：

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

http://www.webdesignerwall.com/demo/jquery/img-replacement.html

所以，想象一下，我想改变屏幕上的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>

是，当你调用一个“淡入”，使用.attr（{SRC：无论}）动画不透明度“或类似的东西，图像源的开关总是使它可见第一，甚至使的.css visisbility后无/不可见。

我已经尝试延迟，setTimeout的，等（我试图研究，尽我所能，以避免重复的帖子）

希望是有道理的，如果对不起它太罗嗦/不明

反馈被感激！ 谢谢！

Answer 1:

如果你所有的包装与容器的元素的情况，然后将图像转换期间淡出容器出/英寸。

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

文章来源: Image Replacement (gallery style) with Fade-In's / Fade-Out's