考虑下面的页面(伪代码)
<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) });
问题是,当标题淡出时,页面的其余部分(内容,页脚)会上升到占用标题所占据的位置.我想要标题就像“显示：块”一样,它的位置永远不会放弃.
然后,在标题已经消失之后,我想把它带回mouSEOver,并在mouSEOut上再次淡出.我试过以下
$("header").hover(function() { $(this).show("slow"); $(this).hide("slow") });
但是,这似乎并没有完成.一个,标题弹出和输出,并且还导致页面的其余部分向上移动.
如何才能达到效果？
解决方法
.fadeOut()完成显示：none;如果不想这样做,请改用
.fadeTo()(不会在最后设置显示),如下所示：
$("header").delay(5000).fadeTo(2000,0);
(注意这使用built-in .delay() function)
You can try out a full demo here,悬停功能褪色,也不会造成移动,如下所示：
$("header").hover(function() {
$(this).fadeTo(600,1);
},function() {
$(this).fadeTo(600,0);
});
