Nice division control thingy

by Andrew Gerst

HTML

<div class="box">
    <div class="in"></div><div class="out"></div>
</div>

<div class="box">
    <div class="in"></div><div class="out"></div>
</div>

<div class="box">
    <div class="in"></div><div class="out"></div>
</div>

<div class="box">
    <div class="in"></div><div class="out"></div>
</div>

<div class="box">
    <div class="in"></div><div class="out"></div>
</div>

CSS

.box {
    height: 50px;
    width: 400px;
    margin-bottom: 10px;
}

.box .in, .box .out {
    -webkit-transition: width 0.2s ease-in-out;
    -moz-transition: width 0.2s ease-in-out;
    border-radius: 3px;
    -moz-border-radius: 3px;
    margin: 0;
    padding: 0;
    height: 50px;
    float: left;
}

.box .in {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#7bc065), to(#387621));
    background-image: -moz-linear-gradient(top center, #7bc065, #387621);
    background-color: #4cb029;
}

.box .out {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#c2c5ca), to(#878a8f));
    background-image: -moz-linear-gradient(top center, #c2c3ca, #878a8f);
    background-color: #989ba2;
}

JavaScript

var boxes;

function updateValues(box) {
    var value = Math.random() * 100;
    box.$in.css('width', value + '%');
    box.$out.css('width', (100 - value) + '%');
}

function queueUpdate(box) {
    var timeout = (Math.random() * 800) + 200; // random duration between 200-1000
    setTimeout(function() {
        updateValues(box);
        queueUpdate(box); // Queue next
    }, timeout);
}

// Initialize an array of all current boxes and cache their in and out elements
boxes = $.map($('.box'), function(box) {
    var $box = $(box);
    return {
        $in: $box.find('.in'),
        $out: $box.find('.out')
    }
});

// Initialize and set an individual interval for each box
$.each(boxes, function(i, box) {
    updateValues(box);
    queueUpdate(box); // Begin updates
});