javascript — показать массив PHP как анимацию?
У меня есть массив 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 и сначала определили метод для вызова. Это будет что-то вроде кода ниже. Вы можете изменить $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, чтобы скрыть контейнер содержимого перед загрузкой страницы и показать содержимое (fadeIn()) через желаемый интервал времени, используя setTimeout(),
Вот скрипка: http://jsfiddle.net/tnzqv4fx/
detector