Показать LI на основе идентификатора в последовательности
Вопрос
Я работаю над созданием цикла for, который вызывает эффект javascript и применяет его к LI, делая это последовательно. Вот что у меня есть:
$(document).ready(function () {
for(i=1;i<=10;i++) {
$("li#"+i).show();
}
});
Однако это не работает. Мне нужно, чтобы применить эффект к LI # 1, затем к LI # 2, LI # 3 ... и так далее.
То, что я пытаюсь сделать, похоже на то, что делает Twitter, когда вы нажимаете кнопку " more &; Кнопка внизу страницы только вместо того, чтобы прыгать, я хочу, чтобы она стала меньше.
РЕДАКТИРОВАТЬ: Я не могу просто обернуть LI в DIV, так как собираюсь добавлять LI в элемент UL.
Однако, если бы существовал способ анимировать UL, так как он изменил размер, я был бы всем ради этого.
Решение
$(document).ready(function () {
for(i=1;i<=10;i++) {
$("li#"+i).show("slow");
}
});
Посмотрите шоу (скорость, [обратный вызов]) . Из документа:
Показать все подходящие элементы, используя изящная анимация и стрельба необязательный обратный вызов после завершения.
Высота, ширина и непрозрачность каждого из согласованных элементов изменены динамически в соответствии с указанным скорость.
Кроме того, существуют другие способы скрытия и раскрытия элементов, такие как fadeIn и < a href = "http://docs.jquery.com/Effects/fadeOut" rel = "nofollow noreferrer"> fadeOut . Просмотрите http://docs.jquery.com/Effects .
Я сделал быстрый макет того, что вам нужно, со статическими данными:
var $lis = $('<li>blha blhahah lajlkdj</li><li>blha blhahah lsdfsajlkdj</li>').hide();
$('ul').append($lis);
$lis.show("slow");
и это работает, поэтому вполне возможно, что вы могли бы сделать что-то вроде следующего, и вам не пришлось бы беспокоиться о головной боли при переборе идентификаторов элементов:
$.load('/items/?p=2',function(data) {
var $lis = $(data).hide();
$('ul').append($lis);
$lis.show("slow");
});
Просто чтобы прояснить, приведенный выше вызов $ .load предполагает, что вывод / items /? p = 2 на вашем сайте - это набор ЛИ
Другие советы
если вы хотите, чтобы каждый отображался с одинаковой скоростью, но с небольшой задержкой между ними, вам может понадобиться использовать setTimeout ... например ...
$(document).ready(function () {
var showListItem = function(index) {
$("li#"+index).show("slow")
};
for(i=1;i<=10;i++) {
setTimeout(function() { showListItem(i); }, (i * 100))
}
});
Это может показаться немного глупым, но если я правильно помню, если вы не заключите свой индекс (i) в какое-то вложение, тогда выполняемый метод всегда будет видеть значение i как 10.
Кроме того, убедитесь, что если вы запускаете это при другом событии, которое загружает новые элементы через Ajax (например, после нажатия кнопки " More "), вам нужно обернуть свою логику в .live () , которая доступна в jQuery 1.3.
Если вы используете jQuery 1.2, вы можете вместо этого использовать livequery .
Это следует сделать, если у вас есть такой список:
<ul id='menu' style='display: none;'>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>
Затем можно написать код для последовательного отображения элементов списка следующим образом:
$('#menu').show().find('li').hide().bind('show', function() {
$(this).show('slow', function() {
$(this).next('li').trigger('show');
});
}).filter(':first').trigger('show');
Код выполняет следующее: находит меню <ul>
, показывает его, находит все <li>
и скрывает их, связывает пользовательское событие с именем show
, которое медленно показывает элемент, и как только оно полностью отображается проверяет, есть ли рядом с ним <=>, и инициирует то же событие для этого элемента. Затем мы отфильтровываем все <=> только первое и запускаем для него это пользовательское событие, по существу отключая эффект домино.
Вот пример этого на работе . Если вы хотите быстрее, вы можете изменить «медленно» на «быстро» или время.