jQuery fadeOut&fadeIn 两个图像完全同时以相同的速度

Question

我正在开发一个web仪表板，我需要将其淡出淡出在三个div中，每个div依次包含2张图片。

我遇到了一些问题

1. 每个 div 中的 2 个图像不会以相同的速度淡出，尽管我对它们使用相同的代码。
2. 在淡出和淡入 2 个 div 之间，我有一个白页。

为了更清楚我的问题，我将附上一张来自我的 HTML 架构和我的 jQuery 函数的图片。

提前感谢您的建议

// this jQuery as Demo
setTimeout(function(){
  // I expect to there 2 first fadeOut is done exactly togheter
    $("#img1").fadeOut(8000);
    $("#img2").fadeOut(8000);
  // I expect to these 2 fadeIn is done exactly togheter
    $("#img3").fadeIn(2000);
    $("#img4").fadeIn(2000);
    
},timeOutDuration);
  

};

<div1 >
<img1 id="img1">
 <!-- This image is greater than img2 with lower z-index, because I want to use it as background  --> 
 </img1>
<img2 id="img2">
<!-- this image should be aligned to bottm left -->
</img2>
</div1>

<div2>
<img3 id="img3">
<!-- This image is greater than img4 with lower z-index, because I want to use it as background  -->  
</img3>
<img4 id="img4">
<!-- this image should be aligned to bottm left --> 
</img4>
</div2>

<div3>
<img5 id="img5">
<!-- This image is greater than img6 with lower z-index, because I want to use it as background  -->   
</img5>
<img6 id="img6">
<!-- this image should be aligned to bottm left -->    
</img6>
</div3>

]1

Answer 1

在同一个函数中调用前 2 个 fadeOut 图像，然后使用回调设置 2 个 fadeIns

$("#img1, #img2").fadeOut(8000, function(){
     $("#img3, #img4").fadeIn(2000);
});