CODEWITHSUNDEEP
jquerycssbackground-image
Joseph Szymborski
Joseph Szymborski

Reputation: 1283

Fading background image slideshow (in jQuery)

I'm trying to get a fading background image slideshow, but I can't seem to find a way to get it the background images to cross-fade into eachother. Instead, I get a flash of white screen, followed by the next image. I've tried .animate, .fadeOut... none of which worked.

Here's a JSFiddle of what I have.

I'm thinking I can maybe do something with loading the next image as a background image behind the first, and somehow magically fade out the first, à la

background:url(images/pattern.png) repeat, url(FIRST IMAGE) no-repeat center center fixed,url(SECOND IMAGE) no-repeat center center fixed";

followed by the magical fading code...

Upvotes: 0

Views: 2581

Answers (1)

Control Freak
Control Freak

Reputation: 13243

It appears that the fadeIn and fadeOut functions weren't working on html or body tags, so I made a wrapping div tag (which can go inside body) and it works fine now.

You can see here: http://jsfiddle.net/BNSFL/4/

Upvotes: 2

Related Questions