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") });

Bu开发者_StackOverflow社区t, 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?

---

.fadeOut() finishes with a display: none;, if you don't want to do that, use .fadeTo() instead (which won't set display at the end), like this:

$("header").delay(5000).fadeTo(2000, 0);

(note this uses the built-in .delay() function)

You can try out a full demo here, with the hover functionality fading and not causing movement as well, like this:

$("header").hover(function() { 
  $(this).fadeTo(600, 1); 
}, function() { 
  $(this).fadeTo(600, 0); 
});

---

Add a container around the header, and style it with display:block and a fixed width/height. When you fade out the header, the container will preserve the space the header occupied.

This way you have an element to bind the hover event to, for re-displaying the header after it's faded out. Once hidden, the header will not be able to receive its own hover events, so the container must receive them in its place.

---

Use visibility:hidden, it will hide the element just like display:none but the layout doesn't change.

You can use animate function. e.g.

 $('#header').animate({opacity: 0}, 2000);

 $("#header").hover(
     function() {  
       $(this).animate({opacity: 1}, 400);
       // you can also use one of the below
       // $(this).css("opacity","1"); 
       // $(this).fadeTo(400, 1);
     },
     function() { 
       $(this).animate({opacity: 0}, 400);
     }
 );

You can also use fadeTo as mentioned by Nick. fadeTo internally sets the opacity equal to the second parameter.

---

Try adding a callback to the hide function that changes it to visibility hidden.

$(this).hide("slow", function(){
   $(this).css("visibility", "hidden");
   $(this).css("display", "block");
});

It would be nice if jQuery let you specify whether to use display or visibility when hiding something, but I don't think it does.

---

You could just put the header inside another and style that div to be the same height as the header. Then if jQuery removed the header it won't effect the page.

Alternatively, as Lobo says, you could make it use visibility:hidden, but I imagine it will be hard to force jQuery not to set it display: none anyway.

---

Position your header absolutely, that way its presence (or lack thereof) will not affect the other page elements