如何在n秒之後在頂部顯示通知欄，並從頂部切換到底部？

Question

在很多移動網站中，我看到通知會在幾秒鐘後以自上而下的動畫顯示。目前，我不記得這些網站。我能夠找到如何顯示頂部通知，但無法找到如何使用CSS 3轉換或javscript/jquery動畫。這裏是我發現的鏈接，http://www.red-team-design.com/cool-notification-messages-with-css3-jquery

Answer 1

這是我如何解決這個問題，

<div class="notify-bar notify-bar-height" style="display: none"> 
      Intall ABC! 
     </div> 
<script> 
      setTimeout(function() { 
       $('.notify-bar').show().addClass('notify-bar-height-change'); 
      },2000) 
     </script> 

.notify-bar{ 
     background-size: 40px 40px; 
     background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, 
          transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, 
          transparent 75%, transparent);          
     box-shadow: inset 0 -1px 0 rgba(255,255,255,.4); 
     width: 100%; 
     border: 1px solid; 
     color: #fff; 
     text-shadow: 0 1px 0 rgba(0,0,0,.5); 
     background-color: #4ea5cd; 
     border-color: #3b8eb5; 
     padding: 5px; 
} 

.notify-bar-height { 
    height: 0; 
    -webkit-transition: height 0.5s ease; 
    -moz-transition: height 0.5s ease; 
    -o-transition: height 0.5s ease; 
    -ms-transition: height 0.5s ease; 
    transition: height 0.5s ease; 
} 
.notify-bar-height-change { 
    height: 20px; 
} 

Answer 2

如果你使用jQuery的移動庫，你可以使用$（'＃some_selector'）。slideDown（2000）。 希望這有助於。

similar question