Question

我有一个在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 + "%&nbsp;");
}

dataprocess.php页面中的div： - ＆lt; div id =“progressBar”class =“default”＆gt;＆lt; div＆gt;＆lt; / div＆gt;＆lt; / div＆gt;

在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％。该过程已经完成，但如果我转到另一个选项卡，只有当我返回到数据处理选项卡时，进度条会停止动画。

感谢。

Answer 1

在这种情况下，尝试使用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;}

希望有所帮助

当打开另一个选项卡时，JQuery进度条会停止动画

1 个答案: