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 example

jQuery图像交叉淡入淡出问题

1 个答案: