Javascript 在视口中计数到

我正在创建一个计数数字，如以下链接所示： 最前面的链接

但有很多问题：

第一个问题：当元素显示在视图端口中时，我需要制作动画

第二个问题：当我再次滚动时，元素编号是从上到下的动画，持续时间不正常。我不知道为什么会出现这个问题

代码如下：

函数倒计时（）{
$（'.count'）。每个（函数（）{
$（this.prop（'Counter'，0）。设置动画({
计数器：$（this.text（））
}, {
持续时间：4000，
放松:"摇摆",，
步骤：功能（现在）{
$（this.text（Math.ceil（now））；
}
});
});
}
$（函数（）{
“用户严格”；
$（窗口）。滚动（函数（）{
console.log（“scroll top=“+$（this）.scroll top（））；
console.log（“div offset top=“+$（“div”）.offset（）.top”）；
var scrolling=$（this）.scrollTop（），
divoffset=$（“.count”）.offset（）.top；
如果（滚动>divoffset-300）{
倒计时（）；
}
})
})

正文{
高度：4000px；
}
.伯爵{
宽度：200px；
高度：200px；
文本对齐：居中；
线高：200px；
边框：1px实心#10f880；
利润率：1000px自动0；
}

1000

函数倒计时（）{
$（'.count'）。每个（函数（）{
$（this.prop（'Counter'，0）。设置动画({
计数器：$（this.text（））
}, {
持续时间：4000，
放松:"摇摆",，
步骤：功能（现在）{
$（this.text（Math.ceil（now））；
}
});
});
}
$（函数（）{
“用户严格”；
var bAnimate=true；
$（“.count”）.css（“不透明度”，“0.0”）；
$（窗口）。滚动（函数（）{
//console.log（“scroll top=“+$（this）.scroll top（））；
//console.log（“div offset top=“+$（“div”）.offset（）.top”）；
var scrolling=$（this）.scrollTop（），
divoffset=$（“.count”）.offset（）.top，
screenBottom=滚动+$（窗口）.height（），
elemBottom=divoffset+$（“.count”）.outerHeight（）；//
如果（屏幕底部>elemBottom）{
if（bAnimate）{
$（“.count”）.css（“不透明度”，“1.0”）；
倒计时（）；
bAnimate=false；
}
}
})
})

正文{
高度：4000px；
}
.伯爵{
宽度：200px；
高度：200px；
文本对齐：居中；
线高：200px；
边框：1px实心#10f880；
利润率：1000px自动0；
}

1000

非常感谢，但有一个简单的问题是，当我按住滚动条时，没有执行动画，我希望用户看到动画，我的意思是，当我滚动时，我看到最大数字，然后数字animationAnswer更新以添加该选项。在执行计数函数之前，只需使用opacity或display属性隐藏元素并显示即可