2012-05-07 43 views
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); 
}); 
+0

可能的Dupl icate:http://stackoverflow.com/questions/811750/how-can-i-get-jquery-to-execute-animations-in-exact-parallel – JaredMcAteer

回答

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

美丽,将标记为完整 – Blainer