使用 animate() JQUERY 获取进度

Question

这是尖晶石：

$('#processing .progress-bar').animate({'width':'60%'},4000);

是否可以显示函数倒计时的毫秒数？

例如我希望能够显示：

然后函数停止

Answer 1

看了@Banana 的解决方案后，我意识到我完全忘记了 step 函数和新的（ish） progress 函数，这两个函数都可以传递给 .animate.我更新的解决方案如下，我删除了另一个以避免混淆。

var $steps = $("#steps");
$('#processing .progress-bar').animate({
  'width': '60%'
}, {
  duration: 4000,
  progress: function(prom, prog, rem) {
    $steps.html("Prog: " + prog + "<br/>Rem: " + rem);
  }
});

#processing {
  width: 80%;
  margin: 5%;
  border: 2px solid black;
  height: 25px;
}
#processing .progress-bar {
  height: 100%;
  background: lime;
  width: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <div id="processing">
    <div class="progress-bar"></div> <span id="steps"></span>

  </div>
</div>

作为旁注，根据您打算将其用于什么目的，您可能需要研究的另一件事是 jQuery 的 .progress 方法，它处理进度通知。请注意，我相当确定调用 .progress 动画本身不会有任何效果，除非您使用上述解决方案在动画的每一步进行进度通知。这是通过调用 .notify 或 .notifyWith 来完成的，但在动画中这样做有点极端。无论如何，这对于不确定时间量的异步调用运行的情况很有用。

Docs 对于 deferred.promise。
Docs 对于 deferred.notify。
Docs 对于 deferred.notifyWith.

Answer 2

var duration = 4000,
    interval = 1000,
    pbar = $('#processing .progress-bar');

pbar.text( duration );

var cd = setInterval(function() {
  duration -= interval;
  pbar.text( duration );
}, interval);

pbar.animate({'width':'60%'}, duration, function() {
  clearInterval(cd);
  pbar.text( '0000' );
});

.progress-bar {
  background-color: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="processing">
  <div class="progress-bar">pBar</div>
</div>

Answer 3

您可以在 jquery 动画中添加一个 step 函数，并在里面计算动画完成还剩多少时间：

$(function () {
    var Now = 0;
    var animationDuration = 4000;
    var DesiredWidth = "200";

    $(".test").animate({
        width: DesiredWidth
    }, {
        easing:"linear",
        duration: animationDuration,
        //the argument in the step call back function will hold the
        // current position of the animated property - width in this case.
        step: function (currentWidth,fx) {
            Now = Math.round((100/DesiredWidth)*currentWidth);
            $(".ms_span").text(Now+"%");
        }
    });
});

div {
  width: 0;
  height: 100px;
  display: block;
  background: purple;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test"></div>
<br/>Percent: <span class="ms_span">

使用 animate() JQUERY 获取进度

get the progress with animate() JQUERY

javascript

jquery

coffeescript

jquery-animate