jQuery交叉淡入淡出2张图片

Question

嘿，我目前正在使用以下代码：

$('#tLight0').fadeTo(500,0.40, function() {
   var theToTurn = $(this).attr('data-toTurn');
   $(this).attr("src","site.com/Images/light_" + theToTurn + ".png");
}).fadeTo(300,1);

为了交叉淡化我的2张照片。但是，在第二张图像开始淡入之前，第一张图像会淡化到大约40％的透明度。

我正在寻找的是淡出（出）第一张图像并同时淡入第二张 。就像你看到图像被交叉淡化一样。

我已尝试过fadeTo的所有类型设置，但它似乎并不像我刚刚描述的那样预先形成。

我如何修改上面的代码才能获得我想要的结果？

Answer 1

同一个容器中的两个图像，绝对定位。

如果你要去40％：

• 淡出第一个
• 淡出回调：更改z-indexes以将第二个放在前面
• 淡出回调：淡入第二个

如果你想要完全消退（可能更好）

• 淡出第一个，淡入第二个（没有回调，它同时发生）