11

我在屏幕底部有一个 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 范围以查看是否有人更改了

Application.LastMove

我希望进度条能够流畅地动画，但我不想通过减少超时值来做到这一点。我认为每秒检查是否有人采取了行动，这对服务器来说已经足够负载了。

我听说过 WebSockets，但我当前的服务器是在 ColdFusion 8 上，所以（我认为）我对每秒执行一次 ajax 调用感到满意，除非你觉得 ajax 不那么优雅并且来自不太文明的时代。

问：您如何将 twitter-bootstrap 进度条从 3.3% 平滑地设置为 6.6%？

4

1 回答 1

14

不要使用 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/

在我的示例中，我添加了两个可能有用的东西：

  1. 动画开始和结束时按钮文本会发生变化（仅用于检查动画时间）
  2. 检查浏览器是否支持此动画：您可以使用 jQuery 代码作为后备模式

有关如何检测 CSS 动画支持的更多信息：https ://developer.mozilla.org/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support

示例：http: //jsfiddle.net/CUbgr/5/

于 2012-09-08T17:27:16.597 回答