Форум

xyzdsnxyz · #1 (**permalink**) 20.01.2012, 11:06

Подскажите плиз, у меня такая задача: есть select, нужно, вывести каждый элемент списка с определенной задержкой. как это сделать?

function Btn_start()
{
	$('#f1 option').each(function(){
		$("#start_txt").append("<div><b>"+this.text+"</b></div>").delay(2000).fadeIn(); // этот кусок кода не работает
	});
}

вернее он выводит все, но без задержки и сразу!

poorking · #2 (**permalink**) 20.01.2012, 11:14

для fadeIn можно задавать время появления и колбэк, который срабатывает после окончательного появления элемента
http://api.jquery.com/fadeIn/

так что вам надо написать рекурсивный метод, который будет внутри колбэка вызывать себя же, но для следующего элемента, пока не закончатся элементы

melky · #3 (**permalink**) 20.01.2012, 11:32

Сообщение от xyzdsnxyz

вернее он выводит все, но без задержки и сразу!

дык вы все элементы будете показывать через 2 секунды. вам надо выдерживать интервал между ними, значит - как минимум, устанавливать время в зависимости от еткущего элемента.

function Btn_start() {
        var i = 1; // начнём с 2 сек.
	$('#f1 option').each(function(){
		$("#start_txt").append("<div><b>"+this.text+"</b></div>").delay(i++*2000).fadeIn();
	});
}

i++*2000 при каждом обращении умножает текущее i на 2000, возвращает результат и увеличивает i на 1.
так что и необязательно тут сри курсией делать.

но первый вариант, на мой взгляд, не идеален. дело в том, что jquery при each передаёт в функцию первым аргументом индекс текущего элемента.

так что внедрять переменную i вовсе и не нужно.

function Btn_start() {
	$('#f1 option').each(function(index){
		$("#start_txt").append("<div><b>"+this.text+"</b></div>").delay(++index*2000).fadeIn();
	});
}

++index*2000 при обращении сначала увеличит index на 1, а потом умножит увеличенный на 2000. сделано это потому, что нумерация элементов в jquery (да и вообще,в массивах) начинается с нуля, а первый элемент (нулевой, т.е.) должен появиться с задержкой в 2000, поэтому мы увеличиваем его номер на 1.

Pavel M. · #4 (**permalink**) 20.01.2012, 11:42

Сообщение от xyzdsnxyz

Подскажите плиз, у меня такая задача: есть select, нужно, вывести каждый элемент списка с определенной задержкой. как это сделать?

можно просто setInterval или setTimeout использовать

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>demo</title>
	<script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script>
	<script>
		$(function(){
		var jOpt = $('option'),
			len = jOpt.length,
			i = 0,
			delay = 2000,
			intervalId = setInterval(function () {
				if (i < len) {
					$('<div>' + jOpt.eq(i).text() + '</div>').appendTo(document.body).hide().fadeIn(delay);
					i += 1;
				} else {
					clearInterval(intervalId);
				}
			}, delay);
		});
	</script>
</head>
<body>
	<select>
		<option>111</option>
		<option>222</option>
		<option>333</option>  
	</select>
</body>
</html>

xyzdsnxyz · #5 (**permalink**) 20.01.2012, 12:41

Большое Вам спасибо - вы мне очень помогли!

Форум

Справочник

Discord чат

Курсы javascript