javascript - 如何用fadein一个一个循环从mysql加载数据？

Question

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

好的，我将从 mysql 中加载图像，总共 40 张图像

那我要显示

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

用淡入和延迟0.5秒然后显示

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

用淡入和延迟0.5秒然后显示

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

用淡入和延迟0.5秒然后显示

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

直到显示到

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

我尝试使用 PHP 循环 来做到这一点，但没有用，我该怎么做？

<?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

好的，您需要首先在 php 中输出所有 40 个图像的 html。进行 40 次查询是不合逻辑的，因此我将其更改为进行 1 次查询并限制为 40 个结果。

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

另请注意 <li>使用 display:none; 使用 css 隐藏标签.然后使用 javascript(在本例中使用 jquery)，您可以遍历所有 li 标签，并设置一个计时器来显示它们。该循环通过将每个元素的超时增加 500 毫秒来工作:

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

强制性说明:mysql_* 函数已贬值。您应该改为使用 mysqli_* 或 pdo