title: jQuery: animate(); with delay time
body: <p>I need a little help with animate() jQuery function.</p>
  
  <p>I want when you scrollDown the white bar to get smaller a bit and when you come back in top of the page, the white bar to return to normal.When I scrollDown, it works ok, but when I scrollTop the white bar return to normal with delay and I don't know why.I don't want it.
  If you can, please help me. Thank you! Sorry for my english.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="header"&gt;
          &lt;div id="sticky_navigation"&gt;
              &lt;div class="container"&gt;
                &lt;div class="row-fluid"&gt;
                  &lt;!-- Logo Block --&gt;
                  &lt;div class="span2"&gt;
                    &lt;a href="#"&gt;&lt;div class="logo1"&gt;&lt;/div&gt;&lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;!-- Nav Block --&gt;
                  &lt;div class="span6"&gt;
                    &lt;ul class="nav"&gt;
                      &lt;li&gt;&lt;a href="#" class="active"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Testimonials&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Faq&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/div&gt;
  
                  &lt;!-- Contact Block --&gt;
                  &lt;div class="span4"&gt;
                    &lt;ul class="contact-list pull-right"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;span class="contact"&gt;&lt;/span&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;span class="cell"&gt;&lt;/span&gt;(03) 9028 2424&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;!-- #header --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.header {
      border-bottom: 1px solid #a4a4a4;
  }
  
  #sticky_navigation {
      width: 100%;
      z-index: 200;
      background: #fff;
      border-bottom: 1px solid #a4a4a4;
  }
  
  .logo1 {
      background-position: 0 -186px ;
      width: 169px;
      height: 27px;
      margin: 30px 0 28px 0;
  }
  
  .nav {
      margin:39px 0 0 0px;
  }
  
  .nav li {
      float: left;
      margin-left: 25px
  }
  
  .nav li a, .contact-list li a {
      text-transform: uppercase;
      text-decoration: none;
      color: #777777;
      font-size: 18px;
      font-weight: bold;
      background-color: none;
  }
  
  .nav li a:hover, .nav li a.active {
      color: #000;
      background-color: none;
  }
  
  .contact-list {
      margin: 39px 0 0 0;
  }
  
  .contact-list li {
      float: left;
  }
  
  .contact-list li:first-child {
      margin-right: 32px;
  }
  
  .contact, .cell {
      display: block;
      float: left; 
      margin:2px 9px 0 0;
  }
  
  .cell {
      background-position: -201px -101px ;
      width: 16px;
      height: 16px;
  }
  
  .contact {
      background-position: -178px -101px ;
      width: 19px;
      height: 15px;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
  var sticky_navigation = function(){
  var scroll_top = $(window).scrollTop();
  
  
  if (scroll_top &gt; sticky_navigation_offset_top) { 
      $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
  
      $( ".logo1" ).animate({ marginTop: '10px' }, 1000);
      $( ".nav" ).animate({ marginTop: '19px'}, 1000);
      $( ".contact-list" ).animate({ marginTop: '19px' }, 1000);
  
  } else {
      $('#sticky_navigation').css({ 'position': 'relative' }); 
  
      $( ".logo1" ).animate({ marginTop: '30px' }, 1000);
      $( ".nav" ).animate({ marginTop: '39px'}, 1000);
      $( ".contact-list" ).animate({ marginTop: '39px' }, 1000);
  
  }   
      };
  
  
  sticky_navigation();
  
  
  $(window).scroll(function() {
       sticky_navigation();
  });
  </code></pre>