交叉淡入淡出图像到背景

Question

我正在寻找一个简单的交叉淡化背景图像。

我有一个初始的背景图像，当用户用另一只拇指单击时，背景图像会随着淡入淡出而切换到新图像

我有以下代码：

$('#backgroundDiv img').fadeOut(550,'linear', function(){
    $('#backgroundDiv img').attr({'src':img_fs});
     //if(this.complete)
    $('#backgroundDiv img').fadeIn(250,'linear');
});

但它首先会进行一次淡出，然后进行淡入。 我不想淡出，因为我不想看到背景色。 我评论一行，因为在IE9和Chrome中它崩溃了。

谁能帮助我完成任何交叉淡化？

谢谢

Answer 1

因此，您想要的是淡出图像，然后淡入实际上在第一个图像“下方”的另一个图像，对吗？

您的代码等待第一个图像消失，然后在另一个图像中消失。

我建议您同时执行两个操作，以便当第一个图像开始消失时，第二个图像已经开始出现：

$('#backgroundDiv img').fadeOut(550,'linear');
$('#apresentacaoBgImage img').attr({'src':img_fs}).fadeIn(250,'linear');

编辑：如果只有一个图像，那实际上是不可能的。 因此，我们必须创建该图像的副本，并对这两个图像进行所需的处理，因为在某个时候（当第一个图像开始消失而第二个图像开始出现时），我们肯定需要两个图像。 这是我所做的：

请注意，div #backgroundDiv只能包含一个图像，因为它用作position: relative对于将第二个图像#backgroundDiv在所有奇特的东西之前的第一个图像之下 。

这里的工作示例。

HTML：

<div id="backgroundDiv" style="position: relative;">
    <img src="http://trollface.sparxified.com/Trollface_HD.jpg" width="200px" height="200px" />
</div>

JS：

var img_fs = 'http://driph.com/words/wp-content/uploads/2008/04/e.gif';
$("#backgroundDiv img").clone().appendTo("#backgroundDiv").hide().attr({ src: img_fs }).css({ position: 'absolute', top: 0, left: 0 });
$("#backgroundDiv img:first").fadeOut(550,'linear');
$("#backgroundDiv img:last").fadeIn(550,'linear');

PS：我修改了fadeIn()和fadeOut()的持续时间，使其与使用不同的fadeIn()看起来很奇怪。

Answer 2

也许这会帮助你

$('#backgroundDiv img').hide()
$('#apresentacaoBgImage img').attr('src',img_fs).fadeIn(250,'linear');