jQuery-使div每秒钟变宽

Question

首先，我要警告您，我的英语不太好...

好的，这是我的问题：我有一个进度条，该进度条根据百分比每秒变宽。

我想每秒增加1.67 / [max]百分比。 [max] = 100％（需要多少分钟）。 （如果[max] = 10进度条将需要10分钟）

我的代码有效，但前提是该数字（除后）大于0.3 （类似）。

因此，这意味着进度条将花费1分钟（ [max] = 1 ），代码将起作用，因为除后的数字为1.67 。 但是，如果我将最大时间设为15分钟，那将无法正常工作- 为什么？

这是我的代码：（我添加了一些注释以使其变得更容易）

<script>
function updateProgress() {
  /*Get Progress Width (in percents)*/ var progress = ( 100 * parseFloat($('#arena_bar').css('width')) / parseFloat($('#arena_bar').parent().css('width')) );
  var corrent = progress;
  var max = 1; // one minute
  var add = 1.67 / max;

  if (progress < 100) {
      corrent += add;
      $("#arena_bar").css("width", corrent + "%");
      setTimeout(updateProgress, 1000); // update every second
  }
}
updateProgress();
</script>

请帮忙 ！

Answer 1

问题是您没有使CSS的宽度增长到足以改变百分比的程度，因此它保持恒定（至少看起来是这样）。 问题是，您实际上并不需要所有这些。

这是您的代码的js小提琴 ，已更改为可用 。 我更改了时间延迟以使其运行更快，如果需要，可以将其更改回1000ms。

和代码：

HTML：

<div style="width:400px; background-color:black">
<div id="arena_bar" style="background-color:navy; width:10px">&nbsp;</div>
</div>

JS：

  /*Get Progress Width (in percents)*/ var corrent = ( 100 * parseFloat($('#arena_bar').css('width')) / parseFloat($('#arena_bar').parent().css('width')) );
function updateProgress() {
  var max = 15; // one minute
  var add = 1.67 / max;
  if (corrent < 100) {
      corrent += add;
      $("#arena_bar").css("width", corrent + "%");
      setTimeout(updateProgress, 50); // update every second
  }
}
updateProgress();

Answer 2

根据记录，jQuery不会将您计算的宽度设置为实际百分比值，而是使用像素值来设置它们。

在此示例中，您可以看到您的书写宽度和读取宽度。

function updateProgress() {
    var progress = (parseInt($('#arena_bar').css('width')) / parseInt($('#arena_bar').parent().css('width')))*100;
    $('.progress').text('Read: ' + progress + ' %');

    var max = 1;
    var add = 1.67 / max;

    if (progress < 100) {
       progress += add;
       $('.debug').html('Written: ' + progress + ' %');
       $("#arena_bar").css("width", progress + "%");
       setTimeout(updateProgress, 1000); // update every second
    }
}
updateProgress();

http://jsfiddle.net/9PjqZ/1/

如您所见，在下一个函数调用中读取值时，它们之间存在差异。 当写入值和读取值之间的差异超出未知限制时，没有问题。 当他们彼此之间距离太近时，您的想法将不再起作用。

您需要将当前百分比保存在css之外，并且仅写入css，而不从css读取。