title: Creating sound bars with jQuery and CSS
body: <p>I have am trying to create animated soundbars using jquery (js fiddle here: <a href="http://jsfiddle.net/rhK4n/" rel="nofollow">http://jsfiddle.net/rhK4n/</a> )</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="eq"&gt;
      &lt;span class="bar"&gt;&lt;/span&gt;
      &lt;span class="bar"&gt;&lt;/span&gt;
      &lt;span class="bar"&gt;&lt;/span&gt;
      &lt;span class="bar"&gt;&lt;/span&gt;
      &lt;span class="bar"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.bar {
      background-color: green;
      width:15px;
      height:40px;
      display: inline-block;
      vertical-align: bottom;
  }
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>function fluctuate(bar) {
      var hgt = Math.random() * 10;
      hgt += 1;
      var t = hgt * 30;
  
      bar.animate({
          height: hgt
      }, t, function() {
          fluctuate($(this));
      });
  }
  
  $(".bar").each(function(i) {
      fluctuate($(this));
  });
  </code></pre>
  
  <p>I want the soundbars to be 40px in height. </p>
  
  <p>However, this method contracts them to c.15px and so the baseline moves up and down, <strong>I want it to be fixed</strong>.</p>
  
  <p>I can't figure out why this error is occuring.</p>