페이드인/페이드아웃을 통한 이미지 교체(갤러리 스타일)

Question

다음을 사용하여 이미지 교체 데모를 모두 보셨을 것입니다.

$("#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 가시성을 없음/보이지 않게 만든 후에도 항상 먼저 표시됩니다.

나는 이미 지연, setTimeout 등을 시도했습니다. (중복 게시물을 피하기 위해 최대한 많이 조사하려고 노력했습니다.)

말이 되기를 바랍니다. 너무 장황하거나 불분명하다면 죄송합니다.

피드백을 보내주시면 감사하겠습니다!감사해요!

Answer 1

모든 요소를 ​​컨테이너로 래핑한 다음 이미지 전환 중에 컨테이너를 페이드 아웃/인하면 어떻게 되나요?

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