Как сделать анимацию блоков?

Question

[Igor Roschak]

Есть уже почти готовое решение, но нижний ряд блоков не анимируется, подскажите что делаю не правильно.
Пример (нужно нажать на кнопку что бы запустить анимацию)

Comments

[Олег]

Что конкретно Вы пытаетесь сделать?
На данный момент у Вас по нажатию на кнопку в начало списка ul доавляется новый элемент li с классом new.

Answer 1

[Александр]

У Вас отрабатывает анимация только при добавлении нового элемента . Соответственно анимацию создает новый элемент, который до второй строки не дотягивается.
Я решил проблему так:

$('.btn').click(function(){
$('ul').prepend('<li class="new"></li>');
if ($('ul li:nth-child(4)').hasClass('new')){
$('ul li:nth-child(4)').replaceWith('<li class="new"></li>');
}
})

Постоянно заменяю первый элемент новой строки если у него есть класс "new", что создает анимацию.

Comments

[Igor Roschak]

анимация начинается c 4-го нового элемента, а как можно сразу сделать?

[Александр]

Igor Roschak: вставьте код и все увидите. Анимация начинается с первого элемента. Постоянно проверяется условие есть ли у 4го элемента класс 'new' и во если есть, то 4 элемент заменяется на новый и начинает работать анимация первой и второй строк. Будет 3я строка так надо будет сделать еще и с 7м элементом.