jQuery fadeOut＆fadeIn同じ速度で正確に同時に2つの画像

Question

私はfadeOut fadeInを3つのdivに分割する必要がある1つのWebダッシュボードを開発しています。各divには2つの画像が順番に含まれています。

私はそれらの両方のために同じコードを使用していますが、それぞれのdivで

1. 2の画像が同じ速度でフェードアウトしませんいくつかの問題に直面しました。
2. 2 divのフェードアウトとフェードインの間に白いページがあります。

私の質問からもっと明確にするために、HTMLのアーキテクチャとjQueryの機能から1つのイメージを添付します。事前にご提案のための

おかげ

// 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枚のフェードアウト画像は2 fadeIns

を離れて設定するコールバックを使用します

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