如何用fadein逐个循环从mysql加载数据？

Question

How to load data from mysql with fadein one by one loop ?

OK, i will load image from mysql total 40 image

Then i want to display

<li class="img" style=" list-style: none; float: left; margin: 7px; width: 80px; ">
    <img src="<?PHP echo $img_products[0]; ?>"/>
</li>

with fadein and delay 0.5 sec. And then display

<li class="img" style=" list-style: none; float: left; margin: 7px; width: 80px; ">
    <img src="<?PHP echo $img_products[1]; ?>"/>
</li>

with fadein and delay 0.5 sec. And then display

<li class="img" style=" list-style: none; float: left; margin: 7px; width: 80px; ">
    <img src="<?PHP echo $img_products[2]; ?>"/>
</li>

with fadein and delay 0.5 sec. And then display

<li class="img" style=" list-style: none; float: left; margin: 7px; width: 80px; ">
    <img src="<?PHP echo $img_products[3]; ?>"/>
</li>

until display to

<li class="img" style=" list-style: none; float: left; margin: 7px; width: 80px; ">
    <img src="<?PHP echo $img_products[39]; ?>"/>
</li>

i try to using loop for PHP to do that , but not work, How an i do that ?

<?PHP 
for($i=0;$i<40;$i++)
{
    $strSQL = "SELECT * FROM products WHERE data_type = '$strID' order by id desc Limit $i,1 ";
    $objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
    $objResult = mysql_fetch_array($objQuery);
    $img_products[$i] = $objResult["img_path"];
}


for($i=0;$i<40;$i++)
{
<li class="img" style=" list-style: none; float: left; margin: 7px; width: 80px; ">
    <img src="<?PHP echo $img_products[$i]; ?>"/>
</li>
}
?>

Answer 1

Ok, you need to 1st output the html for all 40 images in php. Making 40 queries is just illogical, so i have changed that to make 1 query with a limit of 40 results.

<?php
$strSQL = "SELECT * FROM products WHERE data_type = '$strID' order by id desc Limit 40";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
while($row = mysql_fetch_array($objQuery)):?>

    <li class="img" style="display:none; list-style: none; float: left; margin: 7px; width: 80px; ">
        <img src="<?php echo $row["img_path"]; ?>"/>
    </li>

<?php endwhile;?>

Also note that the <li> tags are hidden with css using display:none;. Then using javascript (in this case with jquery) you can loop through all the li tags, and set a timer to show them. The loop works by increasing the timout by 500 miliseconds per item:

<script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script>
$(function(){
    $('li.img').each(function(index){
        $(this).delay(500*index).fadeIn(400);
    });
});
</script>

Obligatory note: mysql_* functions are depreciated. You should instead use mysqli_* or pdo instead