как перебрать элементы списка с задержкой
Подскажите плиз, у меня такая задача: есть select, нужно, вывести каждый элемент списка с определенной задержкой. как это сделать?
function Btn_start()
{
$('#f1 option').each(function(){
$("#start_txt").append("<div><b>"+this.text+"</b></div>").delay(2000).fadeIn(); // этот кусок кода не работает
});
}
вернее он выводит все, но без задержки и сразу! |
для fadeIn можно задавать время появления и колбэк, который срабатывает после окончательного появления элемента
http://api.jquery.com/fadeIn/ так что вам надо написать рекурсивный метод, который будет внутри колбэка вызывать себя же, но для следующего элемента, пока не закончатся элементы |
Цитата:
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. |
Цитата:
<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>
|
Большое Вам спасибо - вы мне очень помогли!
|
| Часовой пояс GMT +3, время: 08:05. |