title: Animate jQuery height percentage
body: <p>When I'm trying to animate percentage, it's not animating, but expanding to whole height instantly. I want it to expand to 100%, but smoothly</p>
  
  <p>CSS:</p>
  
  <pre><code>#block-views{
  overflow:hidden;
  height:20px;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="block-views"&gt;
      1&lt;br/&gt;
      2&lt;br/&gt;
      3&lt;br/&gt;
      4&lt;br/&gt;
      5&lt;br/&gt;
      6&lt;br/&gt;
      7&lt;br/&gt;
      8&lt;br/&gt;
      9&lt;br/&gt;
      10&lt;br/&gt;
  &lt;/div&gt;
  &lt;a href="#" class="loadmore"&gt;Load more&lt;/a&gt;
  </code></pre>
  
  <p>Jquery code:</p>
  
  <pre><code>$(function() {
      $( ".loadmore" ).toggle(
          function() {
              $( "#block-views" ).animate({
                  height: "20px",
              }, 1000 );
          },
          function() {
              $( "#block-views" ).animate({
                  height: "100%",
              }, 1000 );
          }
  
      );
  });
  </code></pre>
  
  <p>When I click on load more, it expands to 100% instantly, not smoothly, but when I click on it second time, it decreases size to 20 px smoothly. I tried to watch expanding process in Chrome's inspector tool and I can clearly see that percentage is adding smoothly, but numbers aren't integers, and Chrome doesn't seem to recognize it. How can I solve this?</p>