Use jquery to fade in images

[multichild]

I have the code below in my wordpress site, its allowing a set of images to rotate as background images on a div, works well, but its not quite what I need.

The fade on this is quite harsh, what I think I would prefer is for the images to fade in and out, rather than an image disappearing to white and then the next one appears, so they fade in and out to make it more smooth.

(function($){//begin closure
//variable to keep the index count
var count = 0;
//Time in milliseconds(currently set to 4 seconds)for the setInterval Function
//
var milliseconds = 8000;
//Time in milliseconds for the animated transition.
var transitionTime = 3500;    
//selects an element with an id of target
//use .className if you want to select an element by a className
var selector = "#homePageHeaderBgImage";
setInterval(function(){
//Array to store image urls(replace with the urls of your images)
var images= ["http://www.accend4web.co.uk/DandG/wp-content/uploads/2019/02/Test-Home-Large-Header.jpg",
             "http://www.accend4web.co.uk/DandG/wp-content/uploads/2019/02/Test-Home-Large-Header.jpg"];
//create a new image
var tempImage = new Image();
//add the image src
tempImage.src = images[count];
//on load event for the image object
$(tempImage).on("load",function(){//begin event
//set the opacity of the element to zero(transparent),
//animate it to opaque by setting its opacity to 1
$(selector).css("opacity","0")
        .animate({ opacity: 1, specialEasing: {width: "linear", height: "easeOutBounce"} }, { duration: transitionTime });
//change the background image
$(selector).css("background-image", "url(" + tempImage.src +")");
});//end event
//If the count is less than the image array length - 1,
//Explanation: Array indexes start at 0 so you will need to subtract
//1 to match array index. If you do not subract one then the code will
//try and load images[2] which doesn't exist.
if(count < images.length - 1){
//increment the count
count++;
}
else{
//reset count to 0 when the the last index is reached.
count = 0;
}
},milliseconds);//<-- pass in the interval time to execute the code
})(jQuery);//end closure

My site

[PaulOB]

At the risk of jumping in where I’m not wanted it seems to me that you need two images to be manipulated at the same time. One to fade in and then one to fade out.

I would create two divs and then fade each in and out as you go. I would also fix position (position:fixed) the elements rather than using background-size:fixed because background-size doesn’t work on mobiles when you use background-attachment fixed. (You should also remove your header details from the actions because you don;t want your menu fading out).

Also you did not have 100% height because your css is flawed in that 100% height can only be obtained from a parent with height defined. You can use the ‘vh’ unit though to get 100% height.

Here’s a rough demo but hopefully the js gurus will come along and optimise the code properly as my js is limited in scope

We could of course do the whole thing with CSS only but you would have to hard code the number of images into the keyframes.