В слайдере активный слайд исчезает, но следующий слайд не исчезает; это просто появляется.

Question

Как сделать эффект более плавным, чтобы следующее изображение замирало вместо того, чтобы просто появляться? Активный слайд исчезает, а затем следующий появляется после того, как первый слайд исчезнет до белого. Это не выглядит очень гладкой или элегантный, и я хотел бы иметь FadeIn/выход произойдет более естественно

HTML, является:

<div id="jumbotron"> 
<div class="slider"> 

    <img class="img" src="http://photos.travellerspoint.com/203325/Peru_239.jpg" width="100%"> 

    <img class="img" src="https://kojin.files.wordpress.com/2008/11/sm-08-3281-white-alpaca-pond-white-peaks.jpg" width="100%"> 
    <img class="img"src="http://cdn.c.photoshelter.com/img-get/I0000aT96V0jJZX4/s/650/650/Alpaca-Wool-Factory-El-Alto-Bolivia-17.jpg" width="100%"> 

    <img class="img"src="https://kitaliana.files.wordpress.com/2011/09/rug_cusco1.jpg" width="100%"> 

</div> 
</div> 

и код JQuery является:

$(document).ready(function() { 
    var $slider = $('.slider'); 
    var $slide = 'img'; 
    var $transition_time = 2000; 
    var $time_between_slides = 4000; 

    function slides(){ 
    return $slider.find($slide); 
    } 

    slides().fadeOut(); 

    // set active classes 
    slides().first().addClass('active'); 
    slides().first().fadeIn($transition_time); 

    // auto scroll 
    $interval = setInterval(
    function(){ 
     var $i = $slider.find($slide + '.active').index(); 

     slides().eq($i).removeClass('active'); 
     slides().eq($i).fadeOut($transition_time); 

     if (slides().length == $i + 1) $i = -1; // loop to start 

     slides().eq($i + 1).fadeIn($transition_time); 
     slides().eq($i + 1).addClass('active'); 
    } 
    , $transition_time + $time_between_slides 
); 
}); 

Answer 1

Ваша проблема в том, что ваши изображения не сложены друг на друга. Когда новое изображение затухает, оно делает это ниже (ось y, а не ось z) текущего изображения, и когда вы удаляете старое изображение из DOM, новый переходит на свое место, делая его таким, как если бы он был «т исчезать.

Добавьте следующий CSS, чтобы убедиться, что все изображения в тех же координатах, т.е. правильно уложены друг над другом

.slider { position:relative;} 
.slider > .img { position:absolute;} 

http://jsfiddle.net/d62v6fq9/1/ для законченного примера на основе кода.