javascript – jQuery,隐藏div而不打扰页面的其余部分

前端之家收集整理的这篇文章主要介绍了javascript – 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) });

问题是,当标题淡出时,页面的其余部分(内容,页脚)会上升到占用标题所占据的位置.我想要标题就像“显示:块”一样,它的位置永远不会放弃.

然后,在标题已经消失之后,我想把它带回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); 
});
原文链接:https://www.f2er.com/jquery/154096.html

猜你在找的jQuery相关文章