Tuesday, 20 August 2013

Cross fade background-image with jQuery

Cross fade background-image with jQuery

so I have some images and I would like to show them as a slideshow in the
background. However, I want the image to cross-fade between the current
image and the next image. So far, I have only been able to switch between
the images:
$(document).ready(function () {
var images = ["landing_background_1.jpg", "landing_background_2.jpg",
"landing_background_3.jpg", "landing_background_4.jpg"];
var currentImage = 0;
function changeBackgroundImage() {
$("html").fadeIn().css({
"background-image": "url('img/backgrounds/" +
images[++currentImage] + "')",
});
if (currentImage >= images.length - 1) {
//set it back to the begining
currentImage -= images.length;
}
}
setInterval(changeBackgroundImage, 1500);
});
Any help would be much appreciated! :)

No comments:

Post a Comment