jQueryの私は、メイン画像呼び出すために起動時に次のコードを持ってクリック

Question

による画像とスワップロード：これまでの作業

$(function() { 
    var img = new Image(); 
    $(img).load(function() { 
     //$(this).fadeOut('normal'); 
     $('#bg div table tr td').removeClass('loading').append(this); 
     $(this).fadeIn(); 
    }).attr('src', 'images/home.jpg'); 
}); 

ザッツを。リンクをクリックすると、そのリンクを消滅させ、そこに2番目のリンクをロードしたい。どうにか私はそれを働かせることはできません...ナビゲーションの要素をクリックすることによって読み込まなければならない画像がたくさんありますが、私はコードについてshureではありません。何か案が？

Answer 1

これはおそらくクリーナーアプローチ（jQueryのにこだわっ）

$(function() { 
    var $img = $('<img>', { 
     src: 'images/home.jpg', 
     load: function() { 
      $('#bg div table tr td').removeClass('loading').append(this); 
      $(this).fadeIn('slow'); 
     }, 
     css: { 
      display: 'none' 
     }  
    }).appendTo(document.body /* append wherever you need it */); 

    $('a').bind('click', function() { 
     $img.fadeOut('slow', function() { 
      $img.attr('src', '/images/newimage.jpg'); 
     }); 
    }); 
}); 

デモです：私が正しくあなたを理解している場合、あなたはこのような何か試すことができますhttp://www.jsfiddle.net/AJcXd/

Answer 2

：

function ShowImage(src){ 
    var $imageContainer = $('#bg div table tr td'); 
    $imageContainer.empty().addClass('loading'); 
    var $image = $("<img src='" + src + "'/>"); 
    $image.load(function(){ 
     $imageContainer.removeClass('loading').append(this); 
    }); 
} 

をとこの関数を呼び出してすべての新しい画像を表示します。