Cycle through background images using fadeIn()

Question

I'm making a responsive website with some parallax images and the very first image is meant to be a cycling image, like an image slider. I am using jquery Cool kitten for its responsiveness.

The related jquery plugins i have loaded are:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>  
<script type="text/javascript" src="js/jquery-ui.js"></script>

The css for the div is:

#slide2 {
  background-image:url(../images/darkmap.png);
  height:700px;
}

I have found that using HTML images for the background with this layout can be problematic, which is why i'm avoiding that by using an array:

var imageIndex = 0;
var imagesArray = [
  "images/photo1.png",
  "images/photo2.png",
  "images/photo3.png"
];

I have a code wrapped in a $(document).ready() function that changes the css background to the array and then cycles through the array and I added fadeIn() for a smooth transition:

function changeImage(){
  var index = imageIndex++ % imagesArray.length;
  $("#slide2").css("background","url('"+ imagesArray[index] +"')");
}
setInterval(changeImage, 5000);
changeImage.fadeIn();

The image cycle is working fine, but for some reason the fadeIn() is not working, it just blinks from one image to the other. Can someone please tell me what I am missing?

Answer 1

As mentioned by other users, you cannot use .fadeIn() on a function. You can only use this on an element.

However besides that, what you want to do is not possible on a single element. As soon as you change the background-image of the element, the previous background image disappears. You will not be able to fade it smoothly into the other image since the previous image has simply been replaced and no longer exists.

You will need to add multiple elements, which contain your background images, place them on top of eachother with position: absolute;, then you can use jQuery to fade the appropriate ones in or out.

HTML

<div id="background1"></div>
<div id="background2"></div>

Javascript

setTimeout(function(){
    $("#background2").fadeIn();
}, 2000);

JSFiddle demo

---

You can also make this more dynamic with an array (as you described), and 2 html elements: one bottom element and one top element, which you will cycle through with your backgrounds:

var index = 0;
var imagesArray = ["https://placekitten.com/g/500/300", 
                   "https://placekitten.com/g/600/300", 
                   "https://placekitten.com/g/700/300"];
var background1 = $("#background1"),
    background2 = $("#background2");

//Set the starting background
background2.css("background","url('"+ imagesArray[index] +"')");
setInterval(changeImage, 2000);

function changeImage(){
    //Make sure that the bottom element has the "old" background
    background2.css("background","url('"+ imagesArray[index] +"')");

    //Hide the top element which we will load the "new" background in now
    background1.hide();

    index++;
    if(index >= imagesArray.length){
        index = 0;
    }

    //Set the background of the top element to the new background
    background1.css("background","url('"+ imagesArray[index] +"')");
    //Fade in the top element
    background1.fadeIn();
}

JSFiddle demo