0

以下のコードは機能しますが、前の画像がフェードアウトするまで、新しい画像はフェードインしません。新しい画像が古い画像の上にフェードインしているように見せるために、フェードインとフェードアウトの両方を同時に実行する必要があります。

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

1 に答える 1

2

要素でフェードインアニメーションを呼び出すと、他のフェードアウトアニメーションはまだ実行されているので、フェードインするはずの要素をフェードアウトしないようにしてください。コードは次のようになります:(.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);
});
于 2012-05-07T20:13:00.663 に答える