I have a div that contains a background image as below:

Code:
<div id="custom_header">
<div class="container"></div>
</div>

#custom_header {
 background: #111 url(../images/i-z8tkQD5-XL.jpg) center 80px;
 background-size:cover;
 /*background-size:contain;*/
 /*background-size:auto;*/
 overflow: visible;
 background-repeat:no-repeat;
 height:770px;
}
Which is fine, works great, but what I would like to do now is rotate a few images but keep them as background images.

So I tried the code below and it worked but its not very friendly in that its basically very quick fade in and out, no sort of feeling to it, I would liek it to fade in and out slowly, or to give a bit of atmosphere to the process.

Code:
<script>
jQuery( function( $ ) {
    var images = [ "./images/i-z8tkQD5-XL.jpg", "./images/i-XQXfTbj-XL.jpg", "bg-3.jpg", "bg-4.jpg", "bg-5.jpg" ];
    var currentImage = 0;
    function changeBackground() {
        $( '#custom_header' ).css( { backgroundImage: 'url(' + images[ ++currentImage ] + ')' } );
        if ( currentImage >= images.length - 1 ) {
            currentImage -= images.length;
        }
    }
    setInterval( changeBackground, 5000 );  
});
</script>
#custom_header {
 background: #111 center 80px;
 background-size:cover;
 /*background-size:contain;*/
 /*background-size:auto;*/
 overflow: visible;
 background-repeat:no-repeat;
 height:770px;
}
Could someonw help me with the fade in and out or perhaps even sliding