3秒後にナビバーを表示する方法は？

現在、私が私の個人的なウェブサイトを持っている：ここではhttp://www.troydieter.com 3秒後にナビバーを表示する方法は？

は、コンテンツです：

<!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:[email protected]">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>

私はそれが3秒後に下のバー（div要素のid「ナビゲーション」）を表示するようにしたいと思います。どうすればいい？たとえば、ページを読み込み、3秒後に下部のナビゲーションバーがポップアップします。

ありがとうございます！

出典

2016-07-19 guppy

CSS、Jqueryなどのフルコードを常に追加するか、jsFiddleを使用してコードの実際の例を作成してください。 navigation displayをnoneに設定してから、3secのjQuery遅延を使用して、fadeIn#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:[email protected]">Email</a></li> 
 
     </ul> 
 
    </nav> 
 
</div>

出典

2016-07-19 03:47:51 frnt

3秒後にナビバーを表示する方法は？

答えて

関連する問題