вывод поочередно элементов массива
Доброго времени суток! Подскажите пожалуйста с помощью какого плагина или кода решить такую задачу?
Имеется массив, например: var strings = ['Первая строка', 'Вторая строка', 'Третья строка']; Имеется блок: <div id="block" style="width:300px; height:200px; border:#00CC00 solid 2px; padding:10px;"><p id="mini"></p></div С помощью какой функции, или плагина можно осуществить следующее: элементы массива должны показываться по одному, начиная снизу блока, т.е. сначала появляется первый элемент массива - 'Первая строка', через несколько секунд (2-7 сек) появляется второй элемент массива - 'Вторая строка', причем предыдущий элемент поднимается вверх и т.д. То есть получается что то ввиде чата. постепенно снизу добавляются новые элементы массива, и предыдущие уходят вверх??? Помоги те пожалуйста, хоть с назвагием плагина, которым это можно осуществить, или функцией?? Заранее спасибо!!!... |
Цитата:
|
Цитата:
Мне как бы не совсем нужна анимация. Мне нужно что бы цикл останавливался на 5-7 секунд иначинал обрабатывать следующий элемент! Например скрипт: <div id="block" style="width:300px; height:200px; border:#00CC00 solid 2px; padding:10px;"> <p id="mini"></p> <script type="text/javascript"> var strings = [ 'Первая строка', 'Вторая строка', 'Третья строка' ]; $.each(strings, function(){ $('#mini').append(this + '<br>'); }); </script> Просто выводит подряд все строки в блок по мере выполнения цикла. Как вот тормознуть его, чтоб он вывел первый элемент, подождал 2-7 сек, вывел второй элемент, и т.д. Если Вывести все строки массива в HTML и скрыть их, а потом циклом открывать по одной строчке? |
пример с setTimeout
<div id="test"></div> <script> (function() { var arr = [ 'Первая строка', 'Вторая строка', 'Третья строка' ], elem = document.getElementById( 'test' ), i = -1; return function() { if ( ++i < arr.length ) { elem.innerHTML += arr[ i ] + '<br>'; setTimeout( arguments.callee, 2000 ); } }(); })(); </script> |
Димтрий,
для общего развития: в JS нельзя приостановить цикл или что-нибудь ещё. Есть setTimeout, который лишь откладывает определённые действия на какой то промежуток времени, аостальная часть программы продолжает выполняться. |
Спасбо! А сделать опускание строк это уже сложно? То есть высветился первый элемент, потом он опускается на строку ниже высвечиваетсяя второй и т.д. Что бы конечный результат был:
Третья строка Вторая строка Первая строка |
готово:
<div id="test"></div> <script> (function() { var arr = [ 'Первая строка', 'Вторая строка', 'Третья строка' ], elem = document.getElementById( 'test' ), i = -1; return function() { if ( ++i < arr.length ) { elem.innerHTML = arr[ i ] + '<br>' + elem.innerHTML; setTimeout( arguments.callee, 2000 ); } }(); })(); </script> |
То что надо!! Спасибо огромное.
P.S. Если не трудно подскажите плз что означает: ( ++i < arr.length ) и последнее выражение i=-1 elem = document.getElementById( 'test' ),i = -1 Это так. Чтоб самому понять... Еще раз спасибо! |
i=-1
присваиваем переменной-счётчику значение -1 ++i < arr.length 1) ++i увеличивает i на еденицу и возвращает новое значение i. например, если i было -1, то после этого оно будет равным 0 i=-1; alert(++i) 2) arr.length - просто количество элементов в массиве arr. нумерация массива с 0 3) ( ++i < arr.length ) сравниваем переменную-счётчик с длиной массива, одновременно увеличивая её на 1 |
А все это можно сделать с jQuery??
|
Часовой пояс GMT +3, время: 14:22. |