HenryM HenryM - 3 months ago 12
CSS Question

Fade in a changed div background image

I'm using the following js to change the

background-image
on a div but I would like to fade in the image. How can I do that?

var now = 0;
var int = self.setInterval("changeBG()", 3500);
var array = ["image1.jpg", "image2.jpg", ];

function changeBG(){
//array of backgrounds
now = (now+1) % array.length ;
$('.documentary').css('background-image', 'url("' + array[now] + '")');
}

Answer

Use css animation. in documentary place something like that:

-webkit-transition-property: background-image 300ms ease-in 200ms;
-moz-transition-property: background-image 300ms ease-in 200ms;
-o-transition-property: background-image 300ms ease-in 200ms;
transition: background-image 300ms ease-in 200ms;
Comments