jQuery,隐藏div而不会打扰页面的其余部分

Question

考虑如下页面(伪代码)

<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>

当页面加载时,我希望标题显示为10秒,然后在接下来的几秒钟内淡出.我能做到这一点

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

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

问题是,当标题淡出时,页面的其余部分(内容,页脚)会突然占据标题占用的位置.我希望标题有点像"display:block",它的位置永远不会放弃.

然后,在标题消失之后,我想将它带回mouseOver,并在mouseOut上再次淡出.我尝试了以下内容

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

但是,这似乎不起作用.一,标题反弹和反弹,也会导致页面的其余部分向上移动.

我怎样才能达到效果？

Answer 1

.fadeOut()用a完成display: none;,如果你不想这样做,请.fadeTo()改用(最后不会设置display),如下所示:

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

(注意这使用内置.delay()函数)

你可以在这里尝试一个完整的演示,悬停功能也会褪色而不会导致移动,如下所示:

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