jQuery图像交叉淡入淡出问题

Question

我有一个5张图片幻灯片，我试图通过在图片之间淡入淡出来制作动画，而不仅仅是在那之间切换。

我的HTML如下，

<div id="slides">
    <ul class="pics">
        <li><img src="images1.jpg" /></li>
        <li><img src="images2.jpg" /></li>
        <li><img src="images3.jpg" /></li>
        <li><img src="images4.jpg" /></li>
        <li><img src="images5.jpg" /></li>
    </ul>
</div>

我的jQuery如下所示，我可以使每个图像都按原样淡入，但是下一个图像只是出现而不会淡入，我是否错过了明显的东西？

var list2 = $('#slides .pics li');
list2.filter(':first').addClass('active').find('img').fadeIn(500);

setInterval(function() {
    if( list2.filter('.active').index() !== list2.length - 1 ) {
        list2.filter('.active').find('img').fadeOut(500, function(){
        list2.filter('.active').removeClass('active').next().addClass('active');
        });
        list2.filter('.active').find('img').fadeIn(500);
    }
    else {
        list2.filter('.active').find('img').fadeOut(500, function(){
        list2.removeClass('active').filter(':first').addClass('active');
        });
    }
}, 4000);

Answer 1

我不确定为什么您要使用.filter（）。 我会更像这样：

$('.pics img:first').show()
function doFade() {
    $('.pics li:first img').fadeOut(500, function () {
        $(this).parent().insertAfter($('.pics li:last'));
        $('.pics li:first img').fadeIn(500);
    })
}
setInterval(doFade, 4000)

jsFiddle示例