Progress Bar Wobble Effect

Question

Wobbling Vertical Progress Bar

---

I learned how to build a neat, dynamically sized vertical progress bar with cross-bars in This Question.

No

Answer 1

Really enjoyed playing with this, so thank you :) I took a different approach but with much less code. I think I went a bit overboard with the colors, if needed I can change it back to red yellow green.

http://jsfiddle.net/3wN77/23/

$('#change-height').on('click', function() {
    var element = $('.attendance-level');
    var height = parseInt( $('#true-height').val() ); // %
    var speed = 1000;  //ms
    var random = 50; //px
    bar_wobble( element, height, speed, random );
});

function bar_wobble(element, height, speed, random) {
    //set the color
    $(element).css('-webkit-filter','hue-rotate('+ 140*(250/height) +'deg)'); //red = 0 deg, green = 140deg

    //wibbly wobbly timey wimey stuff
    height = height/100*250;
    var number_of_wobbles = 3;
    for(var i=1; i<=number_of_wobbles; i++)
    {    $(element).animate({ height: (height + random/i )+'px'}, speed/(number_of_wobbles*2 + 1));
         $(element).animate({ height: (height - random/i )+'px'}, speed/(number_of_wobbles*2 + 1));
        console.log( {i: i, random_i: random/i, random:random, height:height } );
    }
    $(element).animate({ height: height+'px'}, speed/(number_of_wobbles*2 + 1));
}