javascript jQuery，在不干扰页面其余部分的情况下隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6324957/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery, hide a div without disturbing the rest of the page
提问by punkish
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
当页面加载时，我希望标题显示 10 秒，然后在接下来的几秒钟内淡出。我可以用
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
然后，在标题消失后，我想将它带回到 mouseOver 上，并在 mouseOut 上再次淡出。我尝试了以下
$("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?
怎样才能达到效果？
回答by Nick Craver
.fadeOut()finishes with a display: none;, if you don't want to do that, use .fadeTo()instead (which won't set displayat the end), like this:
.fadeOut()以 a 结束display: none;，如果您不想这样做，请.fadeTo()改用（最后不会设置display），如下所示：
$("header").delay(5000).fadeTo(2000, 0);
(note this uses the built-in .delay()function)
（注意这里使用了内置.delay()函数）
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);
});
回答by Praveen Lobo
Use visibility:hidden, it will hide the element just like display:nonebut the layout doesn't change.
使用visibility:hidden，它会像隐藏元素一样隐藏元素，display:none但布局不会改变。
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 fadeToas mentioned by Nick. fadeTo internally sets the opacity equal to the second parameter.
您也可以使用fadeToNick 提到的方法。淡入淡出在内部将不透明度设置为等于第二个参数。
回答by meagar
Add a container around the header, and style it with display:blockand a fixed width/height. When you fade out the header, the container will preserve the space the header occupied.
在标题周围添加一个容器，display:block并使用固定的宽度/高度对其进行样式设置。当您淡出标题时，容器将保留标题占用的空间。
This way you have an element to bind the hoverevent to, for re-displaying the header after it's faded out. Once hidden, the header will not be able to receive its own hoverevents, so the container must receive them in its place.
通过这种方式，您可以将hover事件绑定到一个元素，以便在淡出后重新显示标题。一旦隐藏，标头将无法接收其自己的hover事件，因此容器必须在其位置接收它们。
回答by Will Martin
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.
如果 jQuery 允许您指定在隐藏某些内容时是使用显示还是可见性，那就太好了，但我认为它不会。
回答by Robin Winslow
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.
您可以将标题放在另一个内部，并将该 div 设置为与标题相同的高度。然后，如果 jQuery 删除了标题，它将不会影响页面。
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.
或者，正如 Lobo 所说，您可以使用可见性：隐藏，但我想很难强制 jQuery 不将其设置为 display: none。
回答by cusimar9
Position your header absolutely, that way its presence (or lack thereof) will not affect the other page elements
绝对定位您的标题，这样它的存在（或不存在）不会影响其他页面元素
