fadeIn fadeOut несколько фоновых изображений

Question

Я создал параллакс с несколькими изображениями, которые постепенно исчезают.

   var images = [
    "images/BGK.png",
    "images/slide_2.png",
    "images/PhilBlm.jpg"
    ];
    $bg = $("#elem"),
    n = images.length,
    c = 0; 

    for(var i=0; i<n; i++){
    var tImg = new Image();
    tImg.src = images[i];
    }


    (function loopBg(){
        var bg = $bg.css({backgroundImage : "url("+images[++c%n]+")"})
        bg.fadeOut(4500, function () {
            loopBg()
        }).fadeIn(4000); 
    }());

так что это мой сценарий .. с этим я смог отобразить изображение с помощью метода fadeIn fadeOut ..

я хотел сделать, прежде чем изображение полностью исчезнет, ​​яхочу исчезнуть в другом изображении, потому что с этим сценарием, прежде чем следующее изображение исчезнет в нем, ждет, пока 1-е изображение полностью исчезнет ..

Answer 1

Вы можете использовать delay(), чтобы поставить анимацию в очередь, так что постепенное появление начнется через 0,5 секунды после исчезновения.

(function loopBg(){
    var bg = $bg.css({backgroundImage : "url("+images[++c%n]+")"})
    bg.fadeOut(4500, function () {
        loopBg()
    });
    bg.delay(500).fadeIn(4000); 
}());

Answer 2

Попробуйте:

(function loopBg(){
        var bg = $bg.css({backgroundImage : "url("+images[++c%n]+")"})
        bg.fadeOut(4500, function () {
            loopBg()
        })
        bg.fadeIn(4000); 
    }());