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/。

在查看我的清洁版和原版之后，唯一的区别是小提琴被设置为＆＃34; onDomReady＆＃34;在我的，当你的设置为＆＃34; onLoad＆＃34;。

否则，代码应该已经起作用了。

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

取自：Fading in large images in 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/

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

2 个答案: