Javascript 将一个图像淡入另一个图像

这应该是一个简单的问题。当我按下一个按钮时，我想淡出一个图像，然后淡入一个新图像。我有一个绑定到此功能的按钮：

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

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

在CSS中，h_背景有一个显示：无；属性使用此功能，当前图像将淡出，另一个图像将显示，但不会淡入-它会突然显示

你知道我可能做错了什么吗

添加了一个JSFIDLE，但它目前不起作用——试图找出原因。

---

我用叉子叉了叉你的小提琴，把代码清理了一下：

在查看了我的清理版本和你的原始版本之后，唯一的区别是我的小提琴设置为“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时，一切正常，因此：

$(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");
});

摘自：

另一个编辑：从它的声音来看，您可能正确地猜测这是图像大小的问题。我用新的图像和加载更新了我原来的fiddle（）。请注意，每次都会加载图像，这不是很有效。但它会给你一个想法。以下是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'); 
            });  
    });
}

试试这个：

$("#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小提琴中工作：

如果你只是将h_背景的不透明度设置为0，它会把事情搞砸吗？我听说jQuery在元素中淡入display时有问题：无。代码中没有问题。您何时调用changeBackground函数？除非使用表或其他有效代码，否则没有理由不基于显示的代码工作。在jsfiddle.net中创建一个复制problem@Sushil当我点击页面上的一个按钮时，我会调用它。你的小提琴似乎工作得很好。在这种情况下，onload和ondomready是等效的，所以你在这里提供了非真实的解决方案。加上OP创建的小提琴，我的jQuery/javascript是否可能有问题？我已经设置了确切的情况，但我的JSFIDLE和普通javascript仍然无法工作。图像将淡出，另一个图像将立即进入，而不是淡入。好的。。。奇怪的是。我将图像更改为JSFIDLE示例中使用的猫和狗。它可以很好地处理这些图像…图像是否可能太大而无法正常淡入？@j08691-奇怪，因为原来的小提琴不适合我。@joshft91-查看我的编辑，当我更改为“文档准备就绪”时，您原来的小提琴工作正常。