9

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?

punkish
  • 13,598
  • 26
  • 66
  • 101

6 Answers6

23

.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); 
});
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
3

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.

Praveen Lobo
  • 6,956
  • 2
  • 28
  • 40
  • Thanks, but that solves only part of the problem. I tried doing this by adding a class with visibility hidden, but I would like to do it with a fadeOut. But, most importantly, once the header is hidden, how the heck do I bring it back. I want it to become visible again when the mouse reached the area where the header should be, but now there is no header, so there is no mouseOver to be detected. – punkish Jun 12 '11 at 22:08
  • that was a mistake, I should have set the opacity to 0. The elements recieve mouse events even if the opacity is 0. The accepted answer from @Nick Craver uses fadeTo which internally sets the opacity. I will update the answer anyway. – Praveen Lobo Jun 12 '11 at 22:27
3

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.

user229044
  • 232,980
  • 40
  • 330
  • 338
1

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.

Will Martin
  • 4,142
  • 1
  • 27
  • 38
0

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.

Robin Winslow
  • 10,908
  • 8
  • 62
  • 91
-1

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

cusimar9
  • 5,185
  • 4
  • 24
  • 30