Javascript: странная ошибка при анимации marginLeft?

Question

Итак, я сделал вид сеточной разметки в javascript, но он не работает так, как должен. Я настроил его так, чтобы он изменял левое поле элемента, чтобы оно «скользило» влево / вправо. Однако по какой-то причине он отказывается скользить к последнему слайду. Не знаю почему, похоже, не могу найти ошибку!

Вот копия всей страницы:

http://jsbin.com/obivap/3/edit#preview

Нажмите на одну из других «страниц», чтобы перейти к следующему слайду.

Есть идеи?

Answer 1

Вы анимируете с помощью полей и поплавков. Поэтому, как только вы вытолкнете крайний левый ящик из его контейнера с полем, ящики справа от него (которые до сих пор перемещались вместе с ним из-за поплавка) перестанут двигаться. На -600px коробка полностью покидает контейнер, поэтому следующие коробки теперь находятся напротив границы контейнера. Вы не оживляете их поля, поэтому они не покидают свой контейнер.

Если вы попытаетесь решить эту проблему с помощью анимации полей, это станет грязным. Я не подробно рассмотрел ваш код, но если поля уже position:relative, то вы также можете набрать все их left сумм. Это означает два простых изменения в коде: удалите каждый селектор :first (поскольку вы хотите анимировать их все) и измените все marginLeft на left.

http://jsbin.com/obivap/6/edit