5

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

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/

4

2 回答 2

2

我分叉了你的小提琴并稍微清理了代码：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'); 
            });  
    });
}
于 2012-11-10T21:57:29.593 回答
0

尝试这个：

$("#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/

于 2012-11-10T22:03:39.260 回答