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

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 + "% ");
}

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%。这个过程已经完成，但是如果我转到另一个选项卡，进度条就会停止动画，只有当我回到数据处理选项卡时才能恢复工作。

谢谢。

Answer 1

在这种情况下，尝试使用css3转换而不是js动画。

取代：

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

通过以下方式：

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

并为要动画的div添加css，让我们将其称为myDiv。

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

希望这有帮助