Question

126

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

rated 0 times [ 131] [ 5] / answers: 1 / hits: 15180 / 13 Years ago, sun, june 12, 2011, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tina

Add To Favorites

Follow

Total Points: 91

Total Questions: 106

Total Answers: 104

Location: Vanuatu

Member since Fri, May 13, 2022

2 Years ago

answered 13 Years ago austynp · Accepted Answer

.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); 

});