Javascript 交叉淡入淡出图像到背景

我正在寻找一个简单的交叉渐变背景图像

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

我有以下代码：

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

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

有人能帮我做一些十字花边吗

---

谢谢

所以你想要的是淡出一个图像，然后淡入另一个几乎在第一个图像下面的图像，对吗

代码等待第一个图像消失，然后在另一个图像中淡出

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

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

编辑： 如果你只有一张图片，那简直是不可能的。因此，我们必须创建该图像的副本，并对这两个图像执行您想要的操作，因为在某个时刻，当第一个图像开始消失，第二个图像开始出现时，我们肯定需要两个图像。以下是我所做的：

请注意，div backgroundDiv必须只包含一个图像，因为它被用作位置：相对于第一个图像下的第二个图像在所有花哨内容之前的位置

HTML:

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

---

PS：我修改了fadeIn和fadeOut的持续时间，使之与不同的持续时间看起来一样怪异。

也许这会对你有所帮助

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

---

对不起，我的div名称不正确。我现在改正它。只有一个div。更改的只是源值。但如果你认为有两个div是更好的选择，我会做的。告诉我怎么做

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