CODEWITHSUNDEEP
javascriptjqueryhtmlcss
HenryM
HenryM

Reputation: 5793

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] + '")');
    }

Upvotes: 1

Views: 102

Answers (2)

pol
pol

Reputation: 2701

Is it transparency you are looking for?

You can use opacity on the div containing the image, but this will also make everything inside transparent as well.

Or you could make the image transparent to begin with.

Upvotes: 1

BigBazooka007
BigBazooka007

Reputation: 107

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;

Upvotes: 1

Related Questions