Animacja Fade w JS

Witam!
Jestem w trakcie tworzenia projektu w ramach nauki html i napotkałem pewien problem.
w projekcie w headerze chcę umieścić Slideshow 3 obrazków jako background-image.
Jako że jestem zielony w Java Scriptcie to znalazłem na internecie pewien kod który mi to umożliwił,
jednak kod ten nie uwzględnia animacji fade przez co obrazki wskakuja jak szalone i nie zbyt ładnie to wygląda.
Czy znalazłby się ktoś kto pomógł by mi zaimplementować do tego kodu coś co umiżliwiło by takie przejścia między obrazkami ?
Z góry dziękuję gdyż męczę się z tym od kliku dni ;(
Kod HTML :

 <header class="bg-image">

Kod CSS:

 .bg-image{
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 50vh;
}

Kod JS :

<script>
             $(document).ready(function(){
                var header = $('header');

                var backgrounds = new Array(
                      'url(images/pexels-photo-981035.jpeg)'
                    , 'url(images/nahuel-hawkes-498422-unsplash.jpg)'
                    , 'url(images/pexels-photo-1149129.jpeg)'
                );

                var current = 0;

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

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

Chcesz gotowca, czy poradę?
Jeśli to drugie - rzuć okiem na https://stackoverflow.com/questions/25682379/fade-in-element-by-setting-opacity-with-javascript oraz http://jsfiddle.net/dL02zqku/1/ , może to Ci podsunie jakiś sposób na rozwiązanie problemu :)

wystarczy animate.css, wyciągasz tylko efekt FadeIn i główną klasę i masz, to kilka linijek kodu

jednak kod ten nie uwzględnia animacji fade przez co obrazki wskakuja jak szalone i nie zbyt ładnie to wygląda.

to wstaw to na jsfiddle, codepen itp. żeby ktoś mógł choć trochę ci pomóc, nie na sucho.

Po co w JS, skoro można to zrobić za pomocą transition albo animation w CSS?
(w JS to najwyżej odpalasz).

poza tym

1. jeśli to ma być do nauki, to nie zagrzebuj się w czyichś kodach, tylko naucz się podstaw, fundamentów. Naucz się robienia fade w JS bez żadnego slidera, w zasadzie nie ucz się jak zrobić fade, tylko jak np. sterować przezroczystością. Grzebanie w czyimś kodzie i próby wrzucania gotowych ficzerów wymaga pewnych umiejętności reverse engineeringu i hakowania. Często po prostu łatwiej jest zrobić coś od zer (@cerrato wrzucił link do StackOverflow z podpowiedziami jak).

2. jak się zakopałeś to nie kop dziury coraz głębiej, ale szukaj innych sposobów (zafiksowałeś się, że to ma być w JS, a przecież czemu nie spróbujesz w CSS? Poza tym gdzie leży problem, na jakim etapie się zablokowałeś?). Istnieją również specjalne biblioteki do JS do animacji (chociaż to trochę armata na muchę w tej chwili).

3. wykorzystuj narzędzia, które są ci dostępne. Jeśli i tak już używasz jQuery (nie wnikam dlaczego, ale fakt, że używasz), to, poszukaj tam takich funkcji jak animate czy fade (nie wiem czy są w podstawowej paczce). Swoją drogą w przyszłości przeglądarki mają mieć to out of the box (albo mają, chociaż MDN mówi, że to experimental https://developer.mozilla.org/en-US/docs/Web/API/Element/animate )