将一张图片淡入另一张图片

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 有一个 display: none; 属性。使用此功能，当前图像将淡出，另一个将显示但不会淡入 - 它突然出现。

关于我可能做错了什么的任何想法？

添加了一个 jsfiddle，但它目前不起作用 - 试图找出原因。 http://jsfiddle.net/qrCjA/8/

Answer 1

我分叉了你的小提琴并稍微清理了代码： http: //jsfiddle.net/4FzqA/。

在查看我的清理版本和您的原始版本之后，唯一的区别是小提琴在我的设置为“onDomReady”，而您的设置为“onLoad”。

否则，代码应该可以正常工作。

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'); 
            });  
    });
}