jQuery动画条，在viewpoirt时不要运行

Question

我有一个动画条形脚本，当条形进入视口时运行...

利用这个JSFiddle＆gt; http://jsfiddle.net/9ybUv/

任何人都可以协助制作它，这样如果页面加载了视图中的Bars，它就不会运行动画。

目前，如果用户使用视图中的条形刷新/加载页面，它会显示条形完成状态（这很好） - 但是当用户滚动时动画再次运行，这看起来很奇怪。 - 如果用户滚动到条形图，动画运行和结束，它只会在用户加载/刷新条形图上的页面时发生。

代码：

$(function() {

var $meters = $(".meter > span");
var $section = $('#third');
var $queue = $({});

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');
    }
});

});