0

我有一个函数可以在 div 内的数据处理期间为进度条设置动画。进度条 div 位于 dataprocess.php（父页面）中，该过程在调用页面 generate.php 的 iframe 中完成。我在 dataprocess.php 中的进度条功能如下：-

function progressBar(percent, element)
{
    var progressBarWidth = percent * ($(element).width()) / 100;
    progressBarWidth = progressBarWidth-10;
    $(element).find('div').animate({ width: progressBarWidth }, 5).html(percent + "% ");
}

dataprocess.php 页面中的 div：-
<div id="progressBar" class="default"><div></div></div>

在 generate.php(iframe) 内的 while 循环中，我调用 PHP 函数如下所示，以使父动画中的进度条：-

function progress($percent)
{
    echo '<script type="text/javascript">
          parent.progressBar('.$percent.', "#progressBar");
          </script>';
}

进度条工作正常，但问题是当我的浏览器中有多个选项卡时。现在我在标签 1 中进行数据处理，这个过程大约需要 10-15 分钟。现在假设进度条比我决定转到另一个选项卡的 25%，这意味着选项卡 1 可能我可以说处于空闲状态。一段时间后，我单击返回选项卡 1。我可以看到百分比显示为 100%，但进度条继续从 25% 动画到 100%。该过程已经完成，但是如果我转到另一个选项卡，进度条会停止动画，并且只有在我返回数据处理选项卡时才能恢复。

谢谢。

4

1 回答 1

0

在这种情况下，请尝试使用 css3 过渡而不是 js 动画。

代替：

$(element).find('div').animate({ width: progressBarWidth }, 5).html(percent + "%&nbsp;");

和：

$(element).find('div').width(progressBarWidth).html(percent + "%&nbsp;");

div并为您要制作动画的内容添加一个 css，例如myDiv：

#myDiv{transition:width .1s ease;-moz-transition:width .1s ease;-webkit-transition:width .1s ease;-ms-transition:width .1s ease;}

希望有帮助

于 2013-10-22T08:28:10.653 回答