Question

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

我有一个初始背景图像，当用户点击另一个拇指时，背景图像切换为fadeIn到新图像

我有这段代码：

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

但它首先制作fadeOut并在fadeIn之后制作。我不想要fadeOut因为我不想看到背景颜色。我评论一行，因为在IE9和Chrome中崩溃了。

任何人都可以帮我解决任何交叉问题吗？

由于

Answer 1

所以你想要的是淡出一个图像，然后逐渐淡入另一个实际上在第一个图像之下的图像，对吗？

你的代码等待第一张图像在淡入另一张图像之前消失。

我的建议是你同时做两个动作，这样当第一个图像开始消失时，第二个图像已经开始出现：

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

编辑： 如果你只有一张图片，那实际上是不可能的。所以我们必须创建该图像的副本并用这两个图像做你想要的东西，因为在某些时候（当第一个图像开始消失而第二个图像开始出现时）我们肯定需要两个图像。这就是我所做的：

请注意，div #backgroundDiv必须只包含一个图片，因为它被用作position: relative，以便在所有花哨的东西之前将第二个图像放在第一个图像之前。< / p>

Working example here.

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()的持续时间修改为与看起来很奇怪的时间相同。

Answer 2

也许这会对你有所帮助

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

交叉淡入淡出图像到背景

2 个答案: