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'sがでそう

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>';