Question

目前，我的个人网站位于：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＆＃39;导航＆＃39;）。我该怎么办？例如，您加载页面..三秒后，弹出底部导航栏。

谢谢！

Answer 1

始终添加完整代码，即CSS，Jquery或使用jsFiddle创建代码的工作示例。将navigation display设置为none，然后使用3sec的jQuery延迟，fadeIn #navigation。

CSS

#navigation{
  display:none;
}

的jQuery

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

＆＃13;

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

＆＃13;

#navigation{
  display:none;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: