[jQuery] Help with Element Replacement on Page Load (with fade effect)

[jQuery] Help with Element Replacement on Page Load (with fade effect)


Hi All,
I'm still getting my feet wet with JQuery and am having some trouble
trying to accomplish the following:
I'd like to have one HTML element (in the case of the example below
its a <div class="initial"></div>) be replaced by another HTML element
(again in this case its <div class="replaced"></div>) when the page/
DOM containing these elements is loaded. Additionally, I'd like the
initial element (<div class="initial"></div>) to fade out visually and
the replaced element (<div class="replaced"></div>) to be present
visually behind it as it fades out.
* I've got an example of what I've done so far here -
http://www.brian-talbot.com/inventingroom/replacing-content-on-load/
* You can view the JQuery JS I've tried to cobble together here -
http://www.brian-talbot.com/inventingroom/replacing-content-on-load/js/contentloader.js
If you know of anything I'm doing terribly wrong or a better way to
generally achieve this behaviro, please let me know. Any help is much
appreciated.