PHP進度欄-使用CSS3或jQuery向其中添加一些動畫

Question

我在以下鏈接上實現了php進度欄： http : //w3shaman.com/article/php-progress-bar-script但我想在其中添加一些動畫。 我希望進度條的寬度能夠平滑增加。 我嘗試了CSS3（過渡效果），但不起作用。 知道如何使用CSS3或jQuery添加動畫嗎？

這是代碼：

<div id="progress" style="width:500px;border:1px solid #ccc; transition: width 1s ease-in-out;"></div>
<div id="information" style="width"></div>
<?php

$total = 15;

for($i=1; $i<=$total; $i++){
  // Calculate the percentation
  $percent = intval($i/$total * 100)."%";

  // Javascript for updating the progress bar and information
  echo '<script language="javascript">
   document.getElementById("progress").innerHTML=\'<div style="width:'.$percent.'; background-color:#ddd; transition: width 1s ease-in-out;">&nbsp</div>\' ;
  document.getElementById("information").innerHTML="'.$i.' row(s) processed.";
  </script>';

  // This is for the buffer achieve the minimum size in order to flush data
  echo str_repeat(' ',1024*64);

  // Send output to browser immediately
  flush();

  // Sleep one second so we can see the delay
  sleep(1);
}

// Tell user that the process is completed
echo '<script language="javascript">document.getElementById("information").innerHTML="Process completed"</script>';
?>

Answer 1

也許您可以使用jquery的動畫

jQuery Animate API

所以在：

echo '<script language="javascript">
  document.getElementById("progress").innerHTML=\'<div style="width:'.$percent.'; background-color:#ddd; transition: width 1s ease-in-out;">&nbsp</div>\' ;
  document.getElementById("information").innerHTML="'.$i.' row(s) processed.";
</script>';

您可以將調用添加到動畫函數以更新寬度以進行進度。

例：

//HTML CODE, add the div to be animated inside the progress bar   
<div id="progress" style="width:500px;border:1px solid #ccc; transition: width 1s ease-in-out;">
 <div id="progressStyle" style="width:0%; background-color:#ddd; transition: width 1s ease-in-out;">&nbsp</div>
</div>

//PHP CODE
echo '<script language="javascript">

$( "#progressStyle" ).animate({
 width: '.$percent.'
 }, 500, function() {
 // Animation complete.
 });
</script>';