隐藏div而不会干扰页面的其他部分

隐藏div而不会干扰页面的其他部分

本文介绍了jQuery,隐藏div而不会干扰页面的其他部分的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

限时删除!!

考虑下面的页面(伪代码)

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

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



我该如何实现效果?

解决方案

用 display:none; 完成,如果你不想这样做,可以使用改为(它不会设置 display

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

(注意这里使用)



,悬停功能消失,不会导致移动,如下所示:

  $(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而不会干扰页面的其他部分的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

1403页,肝出来的..

09-06 18:00