simultaneous fadeIn and fadeOut

Question

The below code works, but the new image does'nt fade in until the previous one has faded out. I want them to both fadeIn and fadeOut simultaneously to make it appear as though the new image is fading over the old one.

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

The other fadeout animation is still executing when you call the fadein animation on the element, so try not fading out the element which supposed to be fading in. The code is like this: (I added the .not(bgImage) part to it.)

$('#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);
});