3

これを使用した画像置換のこのデモを見たことがあると思います：

$("#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>

つまり、「フェードイン」や「アニメーションの不透明度」などを呼び出すと、.cssを可視化した後でも、.attr（{src：whatever}）を使用して画像ソースを切り替えると常に最初に表示されます。なし/見えない。

私はすでに遅延、setTimeoutなどを試しました（重複した投稿を避けるためにできる限り調査しようとしました）

それが理にかなっていることを願っています、それがあまりにも言葉で/不明瞭であるならば申し訳ありません

フィードバックをいただければ幸いです。ありがとう！

4

1 に答える 1

1

すべての要素をコンテナでラップし、画像の遷移中にコンテナをフェードアウト/フェードインするとどうなりますか。

$('#primeContainer').fadeOut('fast', function() {
    $('#primeheader').attr({ src: headerpath });
    $('#primetext').attr({ src: textpath });
    $('#primephoto').attr({ src: imagepath });
    $(this).fadeIn('fast');
});
于 2009-08-17T17:18:42.737 に答える