вывод поочередно элементов массива

[Димтрий]

Доброго времени суток! Подскажите пожалуйста с помощью какого плагина или кода решить такую задачу?

Имеется массив, например:

var strings = ['Первая строка', 'Вторая строка', 'Третья строка'];

Имеется блок:

<div id="block" style="width:300px; height:200px; border:#00CC00 solid 2px; padding:10px;"><p id="mini"></p></div

С помощью какой функции, или плагина можно осуществить следующее: элементы массива должны показываться по одному, начиная снизу блока, т.е. сначала появляется первый элемент массива - 'Первая строка', через несколько секунд (2-7 сек) появляется второй элемент массива - 'Вторая строка', причем предыдущий элемент поднимается вверх и т.д.
То есть получается что то ввиде чата. постепенно снизу добавляются новые элементы массива, и предыдущие уходят вверх???
Помоги те пожалуйста, хоть с назвагием плагина, которым это можно осуществить, или функцией??


Заранее спасибо!!!...

[nerv_]

С помощью какой функции,

конкретной функции нет, надо алгоритм писать. Для задержки "вывода" можно (и нужно судя по задаче) использовать setTimeout. Вы хотите анимацию, а одной функцией ее написать на "чистом" js не получится.

[Димтрий]

Вы хотите анимацию.

Я начал учить JS гдето месяц назад. Поэтому могу ошибаться.
Мне как бы не совсем нужна анимация. Мне нужно что бы цикл останавливался на 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 и скрыть их, а потом циклом открывать по одной строчке?

[nerv_]

пример с 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??