I have put a sort of rudimentary preloading animation together with jQuery. You can see it on my site at element17.com
. As you can see, a preloading animation plays until $(window).load is called, at which time that (called '.loading') fadeOut()'s.
That seems to work fine, but you'll see that it basically fades out to transparent, at which time the images that were loading snap into existence. How can I set this up so that that preloading animation fades smoothly into the images?
<div class="loading" style="height:150px; width:475px; z-index:99955; background:#333 url('plog-content/themes/diffuser/images/loading.gif') no-repeat center center;"> </div>
<div class="slideshow">*IMAGES LOAD HERE VIA PHP*</div>
Please excuse the inline styles while I'm testing... :P