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

Question

我正在开发一个网络仪表板，我需要fadeOut fadeIn三个​​div，每个div包含2个图像，顺序。

我遇到了一些问题

1. 每个div中的2个图像不会以相同的速度fadeOut，尽管我对它们使用相同的代码。
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);
});