jQuery fadeOut & fadeIn 동일한 속도로 정확하게 같은 시간에 두 이미지를 동시에 입력하십시오.

Question

하나의 웹 대시 보드를 개발 중입니다. fadeOut fadeIn 세 개의 div가 있어야하며 각 div에는 두 개의 이미지가 순차적으로 포함되어 있습니다.

은 내가 그들 모두에 대해 동일한 코드를 사용하지만, 각 사업부에서

1. 두 이미지가 같은 속도로 페이드 아웃하지 않을 몇 가지 문제를
   에 직면했다.
2. 페이딩 아웃과 페이딩 사이에 2divs 나는 흰 페이지가 있습니다.

내 질문에 더 명확히하기 위해 내 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 개 페이드 아웃 이미지는 다음 2 fadeIns

을 멀리 설정하는 콜백을 사용하여

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