CODEWITHSUNDEEP
jquerycss
user3608238
user3608238

Reputation: 425

jQuery Fade Between Background Images

I am attempting to fade between several background images using jQuery. I currently have:

$(document).ready(function() {
var i = 1;
setInterval(function(){
    i = i + 1;
    if(i>4) {
        i = 1;
    }
    $('.page1').css({
        'background':"url('../img/change/" + i + ".jpg')#131313",
        'background-size': 'cover',
        "opacity":0.7
    });
    $('.page1').animate({ opacity: 1 }, { duration: 1600 });
},5000);
})

However this is causing a noticeable fade to the background color '#131313'. Instead, I am attempting to get the image to fade 'over the top' of the previous images, causing one to blend into the other. How would I go about doing this?

Upvotes: 0

Views: 1763

Answers (1)

MaKR
MaKR

Reputation: 1892

In the question's comments: "If you're looking to cross-fade two images, you'll need two elements, stack them on top of each other, and then adjust the opacity of each in different directions." – Chris Hardie

To elaborate a bit more, animating background images is not supported, but background colors are. Say you set a CSS animation for a fade transition, this will apply to the background but not to the image, so the effect you see (fading colors) is to be expected. Unfortunately this is present in both CSS and JQuery and has no known workaround other than multiple elements.

Here's a tutorial on how to achieve this: http://css3.bradshawenterprises.com/cfimg/

Upvotes: 3

Related Questions