Question

这是spinet：

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

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

例如，我希望能够显示：

然后功能停止

Answer 1

您可以在jquery animate中添加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">

Answer 2

在查看@ 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 3

＆＃13;

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' );
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

通过animate（）JQUERY获得进度

3 个答案: