jquery - 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 以将第二个放在前面
• 淡出回调：淡入第二个

如果您要完全淡入淡出（可能会更好）

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