将 PHP 数组显示为动画

Display PHP array as animation?

本文关键字：动画 显示 数组 PHP      更新时间：2023-09-26

我有一个 php 数组，我用一个 while 循环显示它，它从 sql 数据库中获取数据，目前数组中的所有内容都会立即出现，但是是否有可能让它们以半秒的延迟显示？我必须使用Javascript吗？

你可以在

数组周围放一个<div>，如下所示：

<div id="myElementID" style="display:none;">
MY ARRAY
</div>

而且它将不可见。使用Javascript，您可以在例如1000毫秒后使其可见，例如：

function showElement(id)
// make hidden element visible
{
  document.getElementById(id).style.display = "";
}
window.setTimeout("showElement('myElementID')",1000);

为此不需要其他库。

如果您需要执行多行，则可以在每行周围环绕一个<div>，或者如果您使用的是表，请使用 <tr> 标记，如下所示：

<div id="myRow1" style="display:none;">
ROW 1
</div>
<div id="myRow2" style="display:none;">
ROW 2
</div>
<div id="myRow3" style="display:none;">
ROW 2
</div>
.......
<div id="myRowN" style="display:none;">
ROW N
</div>

在您的脚本中：

for (i = 1; i <= N; i++) { 
  window.setTimeout("showElement('myRow"+i+"')",500);
}

您仍然需要showElement()功能。

如果你想

在PHP中做到这一点，你可以调用一个超时的javascript函数。确保首先包含 jQuery 库 en 定义要调用的方法。它将类似于下面的代码。您可以更改 $delay 变量，以获得不同元素之间的或多或少延迟。

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
    function makeVisible(id, delay)
    {
        setTimeout(function(){
            $('#'+id).fadeIn();
        }, delay);
    }
</script>
<?php
    $delay  = 500;
    $array  = array(1,2,3,4,5);
    $counter = 0;
    foreach($array as $value)
    {
        $uniqueId = 'aClassName'.$counter;
        echo '<div style="display:none;" id="'.$uniqueId.'">'.$value.'</div>';
        echo '<script>makeVisible("'.$uniqueId.'", '.($counter++*$delay).')</script>';
    }
?>

是的，你需要javaScript。只需使用 jQuery。使用 CSS 在页面加载之前隐藏内容容器，并使用 setTimeout() 在所需的时间间隔后显示内容 （ fadeIn() ）。

这里有一个小提琴：http://jsfiddle.net/tnzqv4fx/

相关文章：