Логика jQuery: перемещение элементов и их исчезновение?

#jquery #arrays #logic #traversal

#jquery #массивы #Логические #обход

Вопрос:

Обратитесь к экспертам jQuery 🙂

http://s3.postimage.org/nb2mm7u2/download.png

Вот что мне нужно. Мне нужно, чтобы каждый блок исчезал один за другим. Порядок затухания должен быть :

  • Первый синий элемент
  • Второй синий элемент
    • Верхний-1 и нижний-1 зеленый элемент (вместе)
    • Верхний-2 и нижний-2 зеленых элемента (вместе)
    • Верхний-3 и нижний-3 зеленых элемента (вместе)
  • Третий синий элемент
  • Четвертый синий элемент
    • Верхний-1 и нижний-1 зеленый элемент (вместе)
    • Верхний-2 и нижний-2 зеленых элемента (вместе)
  • Пятый синий элемент

PS: сначала все будет скрыто, а затем все по порядку появится, чтобы придать эту окончательную форму.

Решайте здесь: HTML / CSS-код на JSBIN: http://jsbin.com/ogehoj/edit#javascript ,html, в прямом эфире

Комментарии:

1. Вы даже пытались это реализовать?

2. Вы уже что-нибудь пробовали? Вы могли бы попробовать выбрать элементы с помощью:nth-child() ( api.jquery.com/category/selectors/child-filter-selectors ) и запятая, чтобы выбрать несколько элементов и вызвать fadeIn, давая ему обратный вызов, что делать, когда затухание завершено (затухание в следующих элементах).

3. Пробовал то же самое, используя имена классов, но на самом деле искал решение без имени класса.

Ответ №1:

Было бы неплохо увидеть некоторые доказательства того, что вы пробовали, прежде чем публиковать здесь. Взгляните на http://jsbin.com/etised/4/edit .

В двух словах;

  • определите последовательность рендеринга, добавив data-render-seq="x" к соответствующим элементам
  • При загрузке сгруппируйте элементы по .data('render-seq')
  • повторять по порядку, вызывая .fadeToggle() и увеличивая задержку (если требуется)

Я предположил, что вы можете изменять HTML-код и что вы не возражаете против использования другой библиотеки js (underscore.js )

Комментарии:

1. Привет, Роб — Большое спасибо 🙂 Я пробовал то же самое, используя «имена классов» вместо «значений данных», которые вы использовали. Но ваш код очень организован. Никогда не использовался underscore.js раньше. Спасибо!