个人中心
gpt4 book ai didi

jquery - 如何在 3 秒后显示导航栏？

转载 作者：行者123 更新时间：2023-11-28 05:32:18 24 4
gpt4 key购买 nike

目前，我有我的个人网站:http://www.troydieter.com

内容如下:

<!DOCTYPE html>
<!--[if lte IE 8]> <html class="oldie" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <title>TROYDIETER.COM - DESIGN & TECHNOLOGY</title>
    <link rel="stylesheet" media="all" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Open+Sans:400,600">
    <link rel="stylesheet" media="all" href="css/style.css">
    <link rel="stylesheet" media="all" href="css/font-awesome.css">
    <!--[if lt IE 9]>
        <script src="js/libs/html5shiv.js"></script>
    <![endif]-->
</head>
<body class="no-js">
<div class="container">
    <div class="reveal"> 
        <div class="state-background"></div>
        <div class="slides">
            <section id="home">
                <div class="holder">
                    <div class="inner">
                        <div class="home">
                            <h1><img src="images/logo.png" alt=""></h1>
                            <br><img src="images/Tux_Mono.svg.png" alt="tux" width="350px" height="290px">
                        </div>
                    </div>
                </div>
            </section>

        </div>
    </div>
</div>
<!-- / container -->

<div id="navigation">
    <div class="logo"><a href="#/home"><img src="images/logo_f.png" alt=""></a></div>
    <nav>
        <ul>
            <li><a href="http://www.facebook.com/troy.dieter">Facebook</a></li>
            <li><a href="http://www.linkedin.com/in/troydieter">LinkedIn</a></li>
            <li><a href="https://twitter.com/DieterTroy">Twitter</a></li>
            <li class="last"><a href="mailto:troy@troydieter.com">Email</a></li>
        </ul>
    </nav>
</div>
<!-- / footer -->


<script src="../code.jquery.com/jquery-1.8.2.min.js"></script> 
<script>window.jQuery || document.write("<script src='js/jquery-1.8.2.min.js'>\x3C/script>")</script> 
<script src="js/libs/head.min.js"></script> 
<script src="js/libs/reveal.min.js"></script> 
<script src="js/libs/meny.min.js"></script> 
<script src="js/libs/jquery.cookie.js"></script> 
<script src="js/libs/jquery.placeholder.js"></script> 
<script src="js/libs/jquery.cycle.js"></script> 
<script src="js/libs/jquery.mousewheel.js"></script> 
<script src="js/libs/jquery.jscrollpane.min.js"></script> 
<script src="js/main.js"></script> 
</body>
</html>

我希望它在三秒后显示底部栏 (div id 'navigation')。我该怎么做？例如，您加载页面……三秒后底部导航栏弹出。

谢谢!

最佳答案

始终添加完整代码，即 CSS、Jquery 或使用 jsFiddle 创建代码的工作示例。将您的导航显示设置为none，然后使用3sec的jQuery延迟，您可以淡入您的#navigation 。

CSS

#navigation{
  display:none;
}

jQuery

$(document).ready(function(){
$("#navigation").delay(3000).fadeIn();
});

$(document).ready(function(){
$("#navigation").delay(3000).fadeIn();
});
#navigation{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="reveal"> 
        <div class="state-background"></div>
        <div class="slides">
            <section id="home">
                <div class="holder">
                    <div class="inner">
                        <div class="home">
                            <h1><img src="images/logo.png" alt=""></h1>
                            <br><img src="images/Tux_Mono.svg.png" alt="tux" width="350px" height="290px">
                        </div>
                    </div>
                </div>
            </section>

        </div>
    </div>
</div>
<!-- / container -->

<div id="navigation">
    <div class="logo"><a href="#/home"><img src="images/logo_f.png" alt=""></a></div>
    <nav>
        <ul>
            <li><a href="http://www.facebook.com/troy.dieter">Facebook</a></li>
            <li><a href="http://www.linkedin.com/in/troydieter">LinkedIn</a></li>
            <li><a href="https://twitter.com/DieterTroy">Twitter</a></li>
            <li class="last"><a href="mailto:troy@troydieter.com">Email</a></li>
        </ul>
    </nav>
</div>

关于jquery - 如何在 3 秒后显示导航栏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38449074/

24 4 0
文章推荐： c++ - base64 解码 C++ 失败行尾字节
文章推荐： css - 仅一页的页脚不粘在页面底部
文章推荐： c++ - 输入/输出文件(数独求解器)
文章推荐： html - Bootstrap maxcdn 影响我的 CSS。请帮我解决