将一个图像淡入另一个

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/