jQuery動畫淡入淡出

Question

我有12張幻燈片與圖像。我想使用jQuery動畫或淡入/淡出效果。這裏是我的代碼：

$('#Li4').click(function() { 
    $('#bnrImg').fadein(1000); 
    $('#chnlLogo').fadein(1000); 
    $('#mainBanner').css('backgroundColor', '#FBB03E'); 
    $('#bnrImg').attr('src', 'images/cBanners/bnr_neuro.png'); 
    $('#chnlLogo').attr('src', 'images/images.png'); 
    $('#chnlLink').attr('href', 'http://link.tv'); 
    $('#bnrImg').fadeout(1000); 
    $('#chnlLogo').fadeout(1000); 
}); 
$('#Li5').click(function() { 
    $('#bnrImg').fadein(1000); 
    $('#chnlLogo').fadein(1000); 
    $('#mainBanner').css('backgroundColor', '#DB7EB4'); 
    $('#bnrImg').attr('src', 'images/cBanners/bnr_diabetes.png'); 
    $('#chnlLogo').attr('src', 'images/image.png'); 
    $('#chnlLink').attr('href', 'http://link.com'); 
    $('#bnrImg').fadeout(1000); 
    $('#chnlLogo').fadeout(1000); 
}); 

但問題是，當我點擊從＃LI4＃LI5，在#bnrImg和#chnlLogo做他們的動畫或淡入/淡出我點擊後。我想在點擊幻燈片後淡入淡出效果，然後在幻燈片更改後自動淡入圖像。謝謝。

Answer 1

你可能想看看fadein/out方法可用的回調函數。也許此外，stopPropagation和preventDefault方法可以幫助你。

Answer 2

好的。 Jere是一個完整的示例代碼。只需粘貼到網頁和更改所有圖像路徑：

HTML代碼：

<div id="galleryContainer"> 
    <div id="photoShow"> 
    <div class="current"><img src="assets/banner/banner_one.jpg" width="900" height="324" class="gallery" /></div> 
    <div><img src="assets/banner/banner_two.jpg" width="900" height="324" class="gallery" /></div> 
    <div><img src="assets/banner/banner_three.jpg" width="900" height="324" class="gallery" /></div> 
    <div><img src="assets/banner/banner_four.jpg" width="900" height="324" class="gallery" /></div> 
    <div><img src="assets/banner/banner_five.jpg" width="900" height="324" class="gallery" /></div> 
    <div><img src="assets/banner/banner_six.jpg" width="900" height="324" class="gallery" /></div> 
    </div> 
</div> 

CSS代碼：

#galleryContainer { 
    width:900px; 
    height:330px; 
    margin:0 auto; 
    position:relative; 
    padding-bottom:10px; 
} 
#photoShow { 
    position:relative; 
    width:900px; 
    height:324px; 
    margin:0 auto; 
} 
#photoShow div { 
    position:absolute; 
    z-index: 0; 
    margin-top:8px; 
} 
#photoShow div.previous { 
    z-index: 1; 
} 
#photoShow div.current { 
    z-index: 2; 
} 

這裏是jQuery代碼：

$(function() { 
    setInterval("rotateImages()", 5000); 
}); 
function rotateImages() { 
    var curPhoto = $('#photoShow div.current'); 
    var nxtPhoto = curPhoto.next(); 
    if (nxtPhoto.length == 0) 
    nxtPhoto = $('#photoShow div:first'); 
    curPhoto.removeClass('current').addClass('previous'); 
    nxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 2000, 
    function() { 
     curPhoto.removeClass('previous'); 
    }); 
    } 
});