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 { 
 
\t 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>