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

У меня есть некоторый контент, скользящий здесь.

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

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

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

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

Ответ 1

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

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

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

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

Ответ 2

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

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

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

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