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