Display progress bar one by one using jquery
<p>I have a list of images with progress bar.I want to display the progress bar one by one.</p>

<p>That means i have 5 images with 5 progress bar.When i click on upload button i want to display the first progressbar and doing the corresponding function after completing the functions hide the first progress bar .And display the second progress bar after completing the function of second image hide the second progress bar then third and so on.</p>

<p>I already used setTimeout() for that , but not working perfectly.</p>

<p>This is my html code:</p>

<pre><code>&lt;?php
    $sql = "SELECT * FROM `tblupload` WHERE `indeletestatus` = 0";
    $result = mysql_query($sql);
    $ids = "";
    if($result){
        while($row = mysql_fetch_object($result)){
            if($ids == "")
                $ids = $row-&gt;intid;
            else{
                $ids = $ids.",".$row-&gt;intid;
            }
?&gt;
                    &lt;div id="list&lt;?php echo $row-&gt;intid;?&gt;" class="list_item"&gt;
                        &lt;input type="hidden" name="img&lt;?php echo $row-&gt;intid;?&gt;" id="img&lt;?php echo $row-&gt;intid;?&gt;" value="&lt;?php echo $row-&gt;vchname;?&gt;" /&gt;
                        &lt;?php //echo $i;?&gt;
                        &lt;div id="load_img" class="list_item_img_div"&gt;
                           &lt;!-- &lt;img src="images/pouring-water.jpg" class="list_img_img" /&gt;--&gt;
                            &lt;img src="upload/thumb/&lt;?php echo $row-&gt;vchname;?&gt;" class="list_img_img" onClick="return main_img(&lt;?php echo $row-&gt;intid;?&gt;)" /&gt;
                        &lt;/div&gt;
                        &lt;div id="imgname" class="imgname"&gt;
                            &lt;?php echo $row-&gt;vchname;?&gt;
                        &lt;/div&gt;
                        &lt;div id="imgprogress&lt;?php echo $row-&gt;intid;?&gt;" class="imgprogress"&gt;
                            &lt;img src="images/progress.gif" /&gt;
                        &lt;/div&gt;
                        &lt;div id="imgtrash&lt;?php echo $row-&gt;intid;?&gt;" class="imgtrash"&gt;
                            &lt;img src="images/trash.png" onClick="return delete_img(&lt;?php echo $row-&gt;intid;?&gt;);" /&gt;
                        &lt;/div&gt;
                     &lt;/div&gt;
&lt;?php
        }
    }
?&gt;

&lt;input type="hidden" name="ids" id="ids" value="&lt;?php echo $ids;?&gt;" /&gt;
</code></pre>

<p>This is my javascript code:</p>

<pre><code> Array.prototype.count = function () {
return this.length;
}
$(document).ready(function(){
$("#upload").click(function() {
                var ids = $("#ids").val();
                var arr = ids.split(",");
                var count = arr.count();
                for(i=0;i&lt;count;i++){
                    idval = arr[i];
                    $("#imgprogress"+idval).css("display","block");
                    setTimeout("load_progress(idval)",2000);
                }
        });
  });   

 function load_progress(id){
        $("#imgprogress"+id).css("display","none");
    }
</code></pre>

<p>The problem is that the all progress bar displays simultaneously and after some time the only fifth progress bar hided.</p>

<p>But i want to display the first progress bar for some time ,then the first progress bar become disappear 
after that second progress bar display then after some time second will be hiding and son .
 How can i do this?
Any one can answer for it?</p>
