동시 fadeIn 및 fadeOut

Question

아래 코드는 작동하지만 이전 이미지가 희미해질 때까지 새 이미지가 사라지지 않습니다. 나는 그것들을 fadeIn과 fadeOut을 동시에 사용하여 마치 새로운 이미지가 이전 이미지 위에 희미 해지는 것처럼 보이게합니다.

HTML

<img id="BiblesandCommentaries_bg" src="_\images\backgrounds\BiblesandCommentaries_bg.jpg"/> 
<img id="EnquirersLibrary_bg" src="_\images\backgrounds\EnquirersLibrary_bg.jpg"/> 
<img id="NewBelievers_bg" src="_\images\backgrounds\NewBelievers_bg.jpg"/> 
<img id="ChristianLiving_bg" src="_\images\backgrounds\ChristianLiving_bg.jpg"/> 
<img id="FamilyLibrary_bg" src="_\images\backgrounds\FamilyLibrary_bg.jpg"/> 
<img id="YoungAdultLibrary_bg" src="_\images\backgrounds\YoungAdultLibrary_bg.jpg"/> 
<img id="WorshipLibrary_bg" src="_\images\backgrounds\WorshipLibrary_bg.jpg"/> 
<img id="BibleTeachings_bg" src="_\images\backgrounds\BibleTeachings_bg.jpg"/> 
<img id="Leadership_bg" src="_\images\backgrounds\Leadership_bg.jpg"/> 
<img id="SchoolofChrist_bg" src="_\images\backgrounds\SchoolofChrist_bg.jpg"/> 

JS

$('#sidebar a').click(function() { 
    $('#BiblesandCommentaries_bg, #EnquirersLibrary_bg, #NewBelievers_bg, #ChristianLiving_bg, #FamilyLibrary_bg, #YoungAdultLibrary_bg, #WorshipLibrary_bg, #BibleTeachings_bg, #Leadership_bg, #SchoolofChrist_bg').fadeTo("slow", 0); 
    bgImage = $(this).attr('href')+'_bg'; 
    $(bgImage).fadeTo("slow", 1); 
}); 

Answer 1

당신이 요소에 fadein 애니메이션을 호출, 그래서 페이드 할 예정 요소를 페이드 아웃하지하려고하면 다른 페이드 아웃 애니메이션은 여전히 ​​실행 코드는 다음과 같습니다. (.not(bgImage) 부분을 추가했습니다.)

$('#sidebar a').click(function() { 
    var bgImage = $(this).attr('href')+'_bg';  
    $('#BiblesandCommentaries_bg, #EnquirersLibrary_bg, #NewBelievers_bg, #ChristianLiving_bg, #FamilyLibrary_bg, #YoungAdultLibrary_bg, #WorshipLibrary_bg, #BibleTeachings_bg, #Leadership_bg, #SchoolofChrist_bg').not(bgImage).fadeTo("slow", 0);  
    $(bgImage).fadeTo("slow", 1); 
});