javascript 条形音箱上去

Question

我找到了 this pen在代码笔上。我想使用它，但是条形图向下而不是向上 我怎样才能让它向上？

var elem = $('div');
var count = elem.length;

var loop = function() {

  setTimeout(function() {
    elem.each(function() {
      var $this = $(this);
      var height = (Math.random() * 20) + 1;
      $this.css({
        'background': 'rgba(255, 255, 255,1)',
        'top': height,
        'height': height
      });
    });
    loop();
  }, 320);

}

loop();

section {
  width: 100%;
  display: inline-block;
  margin: auto;
  background: #222;
}

div {
  background: #fff;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: middle;
  height: 1px;
  transition: all linear 250ms;
  width: 2px;
  margin-left: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

Answer 1

var elem = $('.sound-bars div');
var count = elem.length;

var loop = function(){ 
  
  setTimeout(function(){
    elem.each(function(){
      var $this = $(this);
      var height = (Math.random() * 20) + 1;
      $this.css({
        'height': height
      });
    });
    loop();
  }, 320);
  
}
    
loop();

.sound-bars {
  width: 100%;
  display: flex;
  background: #222;
  position: absolute;
  bottom: 0;
  align-items: baseline;
}
.container {
  height: 80px;
  position: relative
}
.sound-bars div {
	background: #fff;
  height: 1px;  
  transition: all linear 250ms;
  width: 2px; 
  margin-left:1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="sound-bars">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>