У меня есть некоторый контент, скользящий здесь.
http://www.smallsharptools.com/downloads/jQuery/Slider/slider.html
Структура HTML проста. Существует внешний ящик с фиксированной высотой и шириной с переполнением, установленным в скрытое. Тогда есть внутренний контейнер с шириной, установленной на всю ширину содержимого внутри него, которая представляет собой серию элементов div, отмеченных классом Item.
Для перемещения внутреннего контейнера влево и вправо меняем левое поле. Чтобы идти влево, я уменьшаю значение, которое становится отрицательным, и чтобы вернуться вправо, я возвращаю его на ноль. Но я вижу зубчатую анимацию, даже в Chrome, которая, как я ожидаю, будет работать лучше.
Мой вопрос: было бы более плавным, если бы я использовал другую технику, чтобы переместить его туда и обратно? Будет ли абсолютное позиционирование более плавным или есть что-то еще, что я должен рассмотреть? Есть ли какие-то секреты, которые делают гладкую анимацию, которую я еще не знаю?
Маржа приведет к перерасчету других элементов, поскольку маркер элемента влияет на положение других элементов вокруг него.
Абсолютное позиционирование (само по себе zIndex) по-прежнему вызывает перерисовку других элементов, но будет менее дорогостоящим с точки зрения вычисления объектов вокруг него.
Этот разговор дает хорошее представление о том, как работают внутренние веб-браузер/dom
http://www.youtube.com/watch?v=a2_6bGNZ7bA&feature=channel_page
У меня были хорошие результаты, используя плагин jQuery "Easing", здесь.
Это позволяет применять различные сглаженные движения, такие как синус, отскок, упругость, ускорение и т.д., к элементу html.
Он использует те же методы, которые вы указываете под капотом, но он заботится о беспорядочном абсолютном/относительном позиционировании для вас. Это также перекрестный браузер и оптимизирован для новых версий.
Одно из лучших преимуществ использования смягчения, однако, заключается в том, что он может помочь даже с меньшими анимациями смены кадров выглядеть более впечатляюще.