jQuery，隐藏div而不会干扰页面的其他部分 [英] jQuery, hide a div without disturbing the rest of the page

问题描述

考虑下面的页面（伪代码）

 < header> 
< search> 
< form> 
<输入文字> <输入提交> 
< / form> 
< / search> 
< menu> 
< ul> 
< li>档案< / li> 
< li>编辑< / li> 
< li>文字< / li> 
< / ul> 
< / menu> 
< / header> 
 
< content>< / content> 
 
< footer>< / footer> 
  

当页面加载时，我希望标题显示例如10秒，然后淡出接下来的几秒钟。我可以用 $ b

  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）}）;

但是，这似乎并没有做这项工作。其中一个，标题反复出入，并导致页面的其余部分向上移动。

我该如何实现效果？

解决方案

.fadeOut（） 用 display：none; 完成，如果你不想这样做，可以使用 .fadeTo（） 改为（它不会设置 display



  $（header）。delay（5000）.fadeTo（2000，0 ）; 
  

（注意这里使用>内置 .delay（）函数）

你可以在这里试试一个完整的演示，悬停功能消失，不会导致移动，如下所示：

  $（header）。hover（function（）{
 $（this）.fadeTo（600，1）; 
}，函数（）{
 $（this）.fadeTo（600，0）; 
}）; 
  

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?

解决方案

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

这篇关于jQuery，隐藏div而不会干扰页面的其他部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！