как постепенно добавить элементы LI?(JQuery) - PullRequest
Новая
       5

как постепенно добавить элементы LI?(JQuery)

1 голос
/ 14 июня 2010

Привет, у меня есть набор <li> с эффектом наведения, я хочу, чтобы страница загружала ВСЕ элементы <li> случайным образом.

Я не хочу их перетасовывать ... они должны сохранить свой порядок без изменений, что означает 1,2,3,4,5. Я просто хочу, чтобы они появлялись на странице случайным образом и оставались там.

Тестовая страница:
http://humayunrehman.com/hovertest/

1 Ответ

4 голосов
/ 14 июня 2010

Вы можете сделать что-то вроде этого: 

var v = $("#blocks > li").css('visibility', 'hidden'), cur = 0;
for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
function fadeInNextLI() {
  v.eq(cur++).css('visibility','visible').hide().fadeIn();
  if(cur != v.length) setTimeout(fadeInNextLI, 50);
}
fadeInNextLI();

Вы можете посмотреть демонстрацию с вашими html / изображениями здесь . Благодарю Джордана Боша за алгоритм сортировки, который используется в jsquares .

Это скроет их всех, возьмет наугад следующий :hidden один, постепенно его затухает, а через 50 мс запускает следующий, создавая эффект исчезновения в случайном порядке. Просто установите нужное время, а также введите время в .fadeIn(), если хотите. Это также остановит эффекты очереди, когда это будет сделано.

...