A cool template trick for Movable Type users

I saw an effect in a WordPress theme that was pretty novel, so I thought I would share here how to reproduce it on a Movable Type theme using JQuery.

<script type="text/javascript">
function fadeHeader()
{
     $("#header").hide().fadeIn(5000, undefined);
}
</script>

The code is straight forward (provided you understand JQuery at least somewhat). It grabs the <em>header</em> &lt;div&gt;, hides it and then fades it in over five seconds. If you want to do this automatically, rather than having to call a JavaScript function, just do:

<script type="text/javascript">
$(window).load({
     $("#header").hide().fadeIn(5000, undefined);
});
</script>

Quick note: <em>undefined</em> is passed there because I didn't want to use a callback function. If you have a function that you want to execute as a callback when fadeIn completes, just pass it as a parameter.

Try it.