Jquery Fade в Fade из

Question

У меня есть следующий код:

Код:

$(document).ready(function(){ 
var header = $('body'); 

var backgrounds = new Array(
'url(/1.jpg)' 
, 'url(/2.jpg)' 
, 'url(/1.jpg)' 

); 

var current = 0; 

function nextBackground() { 
current++; 
current = current % backgrounds.length; 
header.css('background-image', backgrounds[current]); 
} 
setInterval(nextBackground, 5000); 

header.css('background-image', backgrounds[0]); 
}); 

Что я могу добавить к вышеуказанному коду так есть «гладкий» переход между фоновыми изображениями. Я предпочитаю не использовать плагин.

СПАСИБО :)

Answer 1

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

$(document).ready(function(){ 
 
    var image = $('.wrap'); 
 
    var fader = $('.fader'); 
 

 
    var backgrounds = new Array(
 
    'url(http://placehold.it/480&text=Slide+1)' 
 
    ,'url(http://placehold.it/480&text=Slide+2)' 
 
    ,'url(http://placehold.it/480&text=Slide+3)' 
 
); 
 

 
    var current = 0; 
 
    function nextBackground() { 
 
    // Change the background image while 
 
    // creating a duplicate of image and 
 
    // fade it out 
 
    fader.css('background-image', backgrounds[current]).fadeOut(function() { 
 
     fader.css('background-image', '').show(); 
 
    }); 
 
    
 
    current++; 
 
    current = current % backgrounds.length; 
 
    
 
    image.css('background-image', backgrounds[current]); 
 
    } 
 
    setInterval(nextBackground, 2000); 
 

 
    image.css('background-image', backgrounds[0]); 
 
});

.wrap, .fader { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <div class="fader"></div> 
 
</div>

Answer 2

Вы можете приглушить его, изменить цвет фона и исчезать его обратно в:

function nextBackground() { 
    current++; 
    current = current % backgrounds.length; 
    header.fadeOut(200, function(){ 
    header.css('background-image', backgrounds[current]); 
    header.fadeIn(200); 
    }) 
}