jQuery，隐藏div而不干扰页面的其余部分

问题描述

|| 考虑以下页面（伪代码）

<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\") });

但是，这似乎没有做。第一，标题跳入和跳出，并且还导致页面的其余部分向上移动。 如何达到效果？     

解决方法

        

.fadeOut()

以

display: none;

结尾，如果您不想这样做，请改用ѭ5（（最后不会设置

display

），如下所示：

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

（请注意，这使用了内置的

.delay()

函数） 您可以在此处尝试完整的演示，其悬停功能会逐渐消失并且不会引起移动，如下所示：

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

    ,        在页眉周围添加一个容器，并使用

display:block

和固定的宽度/高度对其进行样式设置。当淡出标题时，容器将保留标题占用的空间。 这样，您就可以将元素绑定到

hover

事件，以便在标题消失后重新显示它。隐藏后，标头将无法接收自己的

hover

事件，因此容器必须在其位置接收它们。     ,        使用

visibility:hidden

，它将像

display:none

一样隐藏元素，但布局不会改变。 您可以使用动画功能。例如

 $(\'#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);
     }
 );

您也可以使用Nick提到的

fadeTo

。 fadeTo在内部将不透明度设置为等于第二个参数。     ,        尝试将回调添加到hide函数，将其更改为hidden可见性。

$(this).hide(\"slow\",function(){
   $(this).css(\"visibility\",\"hidden\");
   $(this).css(\"display\",\"block\");
});

如果jQuery让您指定隐藏某物时是使用显示还是可见性，那将是很好的选择，但我不认为这样做。     ,        您可以将标头放在另一个标头中，然后将该div设置为与标头相同的高度。然后，如果jQuery删除了标题，它将不会影响页面。 另外，正如Lobo所说，您可以使它使用“ visible：hidden”，但我想很难强迫jQuery不将其设置为“显示”：无论如何都不显示。     ,        绝对定位标题，这样它的存在（或不存在）将不会影响其他页面元素