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

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

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/

来源

2012-11-10 joshft91

将它搞乱了，如果你只是设置h_background到0的不透明度？我听说jQuery在具有display：none的元素中渐渐衰落。 –

你的代码没有问题。你什么时候调用changeBackground函数？ – Anoop

没有理由不应该基于显示的代码工作，除非使用表或其他代码生效。在jsfiddle.net中创建一个复制问题的演示 – charlietfl

我分叉你的小提琴并清理了一下代码：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"); 
});

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

来源

2012-11-10 21:57:29 dyersituations

在这种情况下，onload和ondomready是等价的，因此您在这里提供了非真实的解决方案。加上OP创作的小提琴。 – j08691

是否有可能是我的jQuery/JavaScript有问题？我已经设置了确切的情况，但我的jsfiddle和普通的JavaScript仍然无法正常工作。图像将淡出，另一张图像将立即进入，而不是淡入。 – joshft91

好吧...这里有什么奇怪的。我将图像更改为我的jsfiddle示例中使用的猫和狗。它可以很好地处理这些图像......图像是否可能太大而无法正常淡入？ – joshft91

试试这个：

$("#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-10 22:03:39 ajtrichards

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

回答

相关问题