title: jQuery animation doesn't work properly
body: <p>I made a simple animation in jquery, but it not always working. In particular:</p>
  
  <pre><code>$(".small-header").animate({top: "0"}, 500);
  </code></pre>
  
  <p>transitions faster than it should. It looks like animation works only on first time. I don't know why. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function( $ ){
      $(document).scroll(function(){
          var top = $(document).scrollTop();
          console.log(top);
          if (top &gt; 160) 
          {
              $(".small-header").css("display", "block");
              $(".small-header").animate({top: "0"}, 500);
              $(".big-header").css("display", "none");
          }
          if (top &lt; 160)
          {
              $(".small-header").css("top", "-5em");
              $(".small-header").css("display", "none");
              $(".big-header").css("display", "block");
          }
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body
  {
    height: 1000px;
  }
  .big-header
  {
      width: 100%;
      min-height: 10em;
      background-color: #ffffff;
      border-bottom: solid #aaaaaa 1px;
  }
  .small-header
  {
      width: 100%;
      height: 4em;
      background-color: #ffffff;
      border-bottom: solid #aaaaaa 1px;
      position: fixed;
      top: -5em;
      left: 0;
      z-index: 9999; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="big-header"&gt;
  &lt;/div&gt;
  &lt;div class="small-header"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/bejkrools/yeddoddf/2/" rel="nofollow">jsfiddle</a></p>