css - Fading background image slideshow (in jQuery) -

i'm trying fading background image slideshow, can't seem find way background images cross-fade eachother. instead, flash of white screen, followed next image. i've tried .animate, .fadeout... none of worked.

here's jsfiddle of have.

i'm thinking can maybe loading next image background image behind first, , somehow magically fade out 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 magical fading code...

it appears fadein , fadeout functions weren't working on html or body tags, made wrapping div tag (which can go inside body) , works fine now.

you can see here: http://jsfiddle.net/bnsfl/4/