#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 раньше. Спасибо!