將一個圖像淡入另一個

Question

這應該是一個簡單的問題。 當我按下一個按鈕時，我想要淡出一張圖像並淡出新一張圖像。 我有一個綁定到此功能的按鈕：

function changeBackground() {
var background = document.getElementById("background");
var h_background = document.getElementById("background_hidden")

$('#background').fadeOut('slow', function() {$('#background_hidden').fadeIn('slow')});
}

在CSS中，h_background顯示如下：none; 屬性。 保持此功能不變，當前圖像將淡出，而另一幅圖像將顯示，但不會淡入-突然顯示。

對我可能做錯的任何想法？

添加了jsfiddle，但目前無法正常工作-試圖找出原因。 http://jsfiddle.net/qrCjA/8/

Answer 1

我分叉了您的小提琴，並對其代碼進行了一些清理： http : //jsfiddle.net/4FzqA/ 。

在查看了我的清理版本和原始版本之后，唯一的區別是，當您將提琴設置為“ onLoad”時，我的提琴設置為“ onDomReady”。

否則，代碼應該已經起作用。

window.onload = function() {
    var button = $("#fade_out").click(changeBackground);
}

function changeBackground() {
    $('#background').fadeOut('slow', function() {
        $('#background_hidden').fadeIn('slow');
    });
}

編輯 ：看起來window.onload與原始小提琴中的onLoad沖突，因為原始小提琴對我不起作用。 當我將window.load更改為文檔就緒時，一切都很好，所以：

$(document).ready(function() {
    var button = $("#fade_out").click(changeBackground);
});

另一編輯 ：如果圖像很大，您可以嘗試等待其加載，但是請記住，如果從緩存中拉出，則加載不會觸發：

$(document).ready(function(){
   var img = new Image();
   $(img)
      .hide()
      .load(function(){
         $("body").append(this);
         $(this).fadeIn(3000);
      })
      .attr("src", "files/originals/01.jpg");
});

摘自： 在Chrome中淡入大圖像 。

另一個編輯：從聲音上看，您猜測它可能是圖像尺寸問題可能是正確的。 我用新圖像和負載更新了原始小提琴（ http://jsfiddle.net/4FzqA/7/ ）。 注意，每次加載圖像都不是很有效。 但這會給您一個想法。 下面是JS：

$(document).ready(function() {
    var button = $("#fade_out").click(changeBackground);
});

function changeBackground() {
    $('#background').fadeOut('slow', function () {
        $('#background_hidden')
            .attr('src', 'http://img688.imageshack.us/img688/8633/daynightm.jpg?' + (new Date()).getTime())
            .load(function () { 
                $(this).fadeIn('slow'); 
            });  
    });
}

Answer 2

嘗試這個：

$("#fade_out").click(function(){
    changeBackground();
});

function changeBackground() {
    var background = document.getElementById("background");
    var h_background = document.getElementById("background_hidden")

    $('#background').fadeOut('slow', function() {
        $('#background_hidden').fadeIn('slow');
    });
}
​

它在以下JS小提琴中起作用： http : //jsfiddle.net/4FzqA/1/