Замена изображения (стиль галереи) с Fade-In's / Fade-Out's

Я уверен, что вы все видели эту демонстрацию замены изображения, используя это:

$("#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: what}) всегда сначала делает его видимым, даже после создания видимости .css нет / невидимый.

Я уже пробовал откладывать, setTimeout и т. д. (я пытался исследовать как можно больше, чтобы избежать дублирования сообщений)

Надеюсь, это имеет смысл, извините, если это слишком многословно/неясно

Обратная связь приветствуется! Спасибо!


image replace swap gallery fade
person Ken    schedule 17.08.2009    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Что произойдет, если вы обернете все элементы контейнером, а затем затените контейнер во время перехода изображения.

$('#primeContainer').fadeOut('fast', function() {
    $('#primeheader').attr({ src: headerpath });
    $('#primetext').attr({ src: textpath });
    $('#primephoto').attr({ src: imagepath });
    $(this).fadeIn('fast');
});
person tvanfosson    schedule 17.08.2009
comment
Почти год спустя, и ответ идеально подходит и для меня. Спасибо! +1 - person Kris.Mitchell; 10.06.2010