2012-03-06 15 views
0

私は、次の操作を行うための正しい方法を探しています:それは近い、jQueryの非表示画像は、内容を変更するには、show画像

タイミング目的のために
$("#some-image").fadeOut(); 
$("#some-image").attr("src", "new-src.png"); 
$("#some-image").fadeIn(); 

次のセットを、私はこれはまだ間違っている知っています:

$("#some-image").fadeOut(function(){ 
    $(this).attr("src", "new-src.png").fadeIn(); 
}); 

ためには、次の操作を行うための正しい方法は何ですか:

  1. フェードイメージが
  2. アウト
  3. イメージが薄れた後、新しいイメージが完全に読み込まれた後、バック

乾杯で画像をフェードイン!新しいSRC

  • をロード

  • 答えて

    0

    あなたの問題は、新しいイメージが、それはすでに薄れている含むDOM要素の後までロードされないということも確認した画像が完全に)(フェードインを呼び出す前にロードされています。

    $("#some-image").fadeOut(function(){ 
        var tgt = $(this), 
         img = new Image, 
         src = "new-src.png"; 
        img.onload = function() { 
         tgt.attr('src', src).fadeIn(); 
        }; 
        img.src = src; 
    }); 
    

    さらに良いことに、事前にイメージをロードします。

    <script> 
        // Outside of $(function() {}) 
        function preload_img(src) { 
         var img = new Image; 
         img.src = src; // loads immediately, maybe even before DOMReady 
        } 
    </script> 
    

    を次にユーザーがあなたのフェードイン/アウトをトリガしたときにイメージがロードされているかどうかを心配する必要はありません。

    0

    コールバック関数を使用します。 fadeOutが完了すると、srcが変更された後でsrcを変更してイメージをフェードインします。

    $("#some-image").fadeOut(function(){ 
        //after the fadeout completes, change the src of the image. 
        $(this).attr("src", "new-src.png").fadeIn();  
    }); 
    
    関連する問題