Как получить более плавную анимацию для скользящего контента с помощью JavaScript / jQuery?

Question

У меня есть какое-то содержание, скользящее здесь.

http://www.smallsharptools.com/downloads/jQuery/Slider/slider.html

Структура HTML проста. Существует внешняя коробка с фиксированной высотой и шириной с переполнением, установленным на скрытый. Затем есть внутренний контейнер с шириной, равной полной ширине содержимого внутри него, которая представляет собой серию элементов div, помеченных классом Item.

Чтобы сдвинуть внутренний контейнер влево и вправо, я изменяю левое поле. Чтобы перейти влево, я уменьшаю значение, которое становится отрицательным, а чтобы вернуться вправо, я возвращаю его в ноль. Но я вижу неровную анимацию даже в Chrome, которая, как я ожидаю, будет работать лучше.

Мой вопрос: было бы более гладко, если бы я использовал другую технику, чтобы перемещать ее вперед и назад? Будет ли абсолютное позиционирование более плавным или есть что-то еще, что я должен рассмотреть? Есть ли секреты плавной анимации, о которых я просто пока не знаю?

Answer 1

Margin приведет к тому, что другие элементы будут пересчитаны, потому что поле элемента влияет на положение других элементов вокруг него.

Абсолютное позиционирование (на собственном zIndex) все равно будет вызывать перерисовку других элементов, но будет менее затратным с точки зрения вычисления объектов вокруг него.

Этот доклад дает хорошее представление о том, как работает браузер / внутренняя структура dom

http://www.youtube.com/watch?v=a2_6bGNZ7bA&feature=channel_page

Answer 2

У меня были хорошие результаты при использовании плагина jQuery "Easing", документация здесь .

Это позволяет применять различные сглаженные движения, такие как синус, отскок, упругость, ускорение и т. Д., К элементу HTML.

Он использует те же приемы, которые вы упоминаете под капотом, но он заботится о беспорядочном абсолютном / относительном позиционировании для вас. Это также кросс-браузер и был оптимизирован для новых версий.

Однако одним из лучших преимуществ использования easing является то, что оно может помочь даже анимациям с низкой частотой кадров выглядеть более впечатляюще.