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 );
你可以在这里试试一个完整的演示,悬停功能消失,不会导致移动,如下所示:
$(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屋!