jQuery animation example

HTML

<div class="container" style="width:100%; height: 40px">
<div class="toanimate  anim0"></div>
</div>
<div class="container" style="width:100%; height: 40px">
<div class="toanimate anim1"></div>
</div>
<div class="container" style="width:100%; height: 40px">
<div class="toanimate anim2"></div>
</div>
<div class="container" style="width:100%; height: 40px">
<div class="toanimate  anim3"></div>
</div>
<div class="container" style="width:100%; height: 40px">
<div class="toanimate  anim4"></div>
</div>
<div class="container" style="width:100%; height: 40px">
<div class="toanimate  anim5"></div>
</div>

<button onclick="javascript:go();">Animate!</button>

<button onclick="javascript:resizeDiv()">Resize</button>

CSS

.toanimate {
    background-color: red;
    width: 10px;
    height: 100%;
}

.container {
    border: 1px solid green;
}

JavaScript

var widthPercent = Math.floor(Math.random() * 100) + 1  ;

function timeout() {
    setTimeout(function () {
        // Do Something Here
        // Then recall the parent function to
        // create a recursive loop.
        timeout();
    }, 1000);
}

function go() {
setTimeout(function () {

    $('. anim0').animate({
    var widthPercent = Math.floor(Math.random() * 100) + 1  ;
        width: widthPercent + '%',
    }, 500);
    
    $('. anim1').animate({
    var widthPercent = Math.floor(Math.random() * 100) + 1  ;
        width: widthPercent + '%',
    }, 500);
    
     $('. anim2').animate({
    var widthPercent = Math.floor(Math.random() * 100) + 1  ;
        width: widthPercent + '%',
    }, 500);
    
     $('. anim3').animate({
    var widthPercent = Math.floor(Math.random() * 100) + 1  ;
        width: widthPercent + '%',
    }, 500);
    
     $('. anim4').animate({
    var widthPercent = Math.floor(Math.random() * 100) + 1  ;
        width: widthPercent + '%',
    }, 500);
    
     $('. anim5').animate({
    var widthPercent = Math.floor(Math.random() * 100) + 1  ;
        width: widthPercent + '%',
    }, 500);   
         go();
    }, 300);   
    
    return false;
}


function resizeDiv() {
    $('.toanimate').css('width', 2*widthPercent + '%');
    
    return false;
}