Блог

У меня есть слайд-шоу из 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);
 

Я не уверен, почему вы используете .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