Fade In / Fade Out background images without white background

AHH ! Finally ! I found a nice technique ! I'm using a double wrapper.

The problem in your code is a bit logical. You can't fadeOut and fadeIn at the same time a single wrapper.

So the idea is to create two wrapper and to switch between them back and forth. We have one wrapper called: "wrapper_top" that encapsulate the second wrapper called: "wrapper_bottom". And the magic was to put beside the second wrapper: your content.

Thus having the structure ready which is the following:

<div id='wrapper_top'>
    <div id='content'>YOUR CONTENT</div>
    <div id='wrapper_bottom'></div>
</div>

Then a bit of JS+CSS and voilà ! It will be dynamic with any amount of images !!!

Here is the implementation: http://jsbin.com/wisofeqetu/1/