我在屏幕底部有一个30秒钟的多玩家游戏.
如果玩家没有任何动作30秒,表单提交.
如果玩家没有任何动作30秒,表单提交.
var ProgressValue = 0;
function showProgress() {
ProgressValue += 100/30;
if (ProgressValue > 100) {
$('form').submit();
}
// Ajax is done here to see if anyone has made a move.
$('.progress .bar').css('width',ProgressValue + '%');
setTimeout(showProgress,1000);
}
setTimeout(showProgress,1000);
每一秒钟,我检查应用范围,看看有没有人改变了它的价值
Application.LastMove
我希望进度条能顺利地动画,但是我不想通过减少超时值来做到这一点.我认为检查每个人是否有人已经采取行动,每秒服务器上已经有足够的负载.
我听说过WebSockets,但是我现在的服务器是ColdFusion 8,所以(我想),除了觉得ajax不那么优雅,文明较少的年龄之外,我很满意每秒进行ajax调用.
问：你如何将twitter-bootstrap进度条从3.3％平均提高到6.6％？
解决方法
不要使用jQuery动画,喜欢CSS动画,除非你必须支持旧的浏览器.
我从Bootstrap样式做了这个复制：
.bar {
-webkit-transition: width 30.0s ease !important;
-moz-transition: width 30.0s ease !important;
-o-transition: width 30.0s ease !important;
transition: width 30.0s ease !important;
}
对于这么长的过渡,我建议您尝试不同的动画：http://www.the-art-of-web.com/css/timing-function/
在我的例子中,我添加了两件可以有用的东西：
>动画开始时和按钮结束时按钮文字会更改(只是为了检查动画时间)
>检查浏览器是否支持此动画：您可以将jQuery代码用作备用模式
有关如何检测CSS动画支持的更多信息：https://developer.mozilla.org/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support
