CODEWITHSUNDEEP
javascriptjquerycsshtml
Blainer
Blainer

Reputation: 2702

simultaneous fadeIn and fadeOut

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);
});

Upvotes: 0

Views: 136

Answers (1)

Taha Paksu
Taha Paksu

Reputation: 15616

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);
});

Upvotes: 2

Related Questions