關於特定位置進度條的加載

羣裏的朋友提問了個問題：
有個進度條，當進度條出如今視野中的時候，開始加載，消失的時候進度條歸0，不讓用css3動畫實現，so，想了想，開工了。。
html:

<div class="main">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block">
        <div class="progress">
            <div class="progressItem" style="width: 0px;"></div>
        </div>
    </div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

css:

.main{
    width:1000px;
    margin:0 auto;
}
.main .block{
    width:100%;
    height:500px;
    background-color:yellow;
    margin-bottom:20px;
}
.main .progress{
    width:50%;
    height:50px;
    margin:0 auto;
    border:1px solid #ebebeb;
}
.main .progress .progressItem{
    background-color:green;
    width:0;
    height:50px;
}

js:

$(window).scroll(function(){
    if(($(window).scrollTop()+$(window).height())>$(".progress").offset().top){
        if(($(window).scrollTop()<$(".progress").offset().top+$(".progress").height())){
            $(".progressItem").animate({
                width:"100%",
            },5000);
        }else{
            $(".progressItem").stop(true,true).css("width","0px");
        }    
    }else{
        $(".progressItem").stop(true,true).css("width","0px");
    }
});

好了，代碼大概是這樣~