Start animation on progress bar when its visible on screen

Question

I want to create a webpage that contains several sections. In one of those sections are something like progress bars. These progress bars are \'animated\' so that the user sees

Answer 1

Here is an updated fiddle http://jsfiddle.net/9ybUv/

This one allows for all the progress bars to run at the same time. If you were like me and had 5 or more it takes a long time to do one, then the next, then the next.

$(function() {

    var $section = $('#third');

    function loadDaBars() {
                $(".meter > span").each(function() {
                    $(this)
                        .data("origWidth", $(this).width())
                        .width(0)
                        .animate({
                            width: $(this).data("origWidth")
                        }, 1200);
                });
    }

    $(document).bind('scroll', function(ev) {
        var scrollOffset = $(document).scrollTop();
        var containerOffset = $section.offset().top - window.innerHeight;
        if (scrollOffset > containerOffset) {
            loadDaBars();
            // unbind event not to load scrolsl again
            $(document).unbind('scroll');
        }
    });

});