jQuery, hide a div without disturbing the rest of the page

Consider the page as below (pseudocode)

<header>
    <search>
        <form>
            <input text> <input submit>
        </form>
    </search>
    <menu>
        <ul>
            <li>File</li>
            <li>Edit</li>
            <li>Text</li>
        </ul>
    </menu>
</header>

<content></content>

<footer></footer>

When the page loads, I want the header to show for, say 10 seconds, then fade out over the next couple of seconds. I can accomplish that with

jQuery.fn.delay = function(time, func){
    return this.each(function(){
        setTimeout(func, time);
    });
};

$("header").delay(5000, function() { $(this).fadeOut(2000) });

The problem is, when header fades out, the rest of the page (content, footer) bumps up to take up the place occupied by header. I want header to be sort of like "display: block" in that, its place is never given up.

Then, after header has faded away, I would like to bring it back on mouseOver, and fade out again on mouseOut. I tried the following

$("header").hover(function() { $(this).show("slow"); $(this).hide("slow") });

But, that doesn't seem to do the work. One, the header bounces in and out, and also causes the rest of the page to move up.

How can I accomplish the effect?