¿Cómo puedo obtener una animación más suave para deslizar contenido con JavaScript/jQuery?

Question

Tengo algunos contenidos deslizándose aquí.

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

La estructura HTML es simple. Hay una caja exterior con una altura y ancho fijos con el desbordamiento establecido en oculto. Luego hay un contenedor interno con el ancho establecido en todo el ancho del contenido dentro de él, que es una serie de elementos div marcados con la clase Item.

Para deslizar el contenedor interno hacia la izquierda y hacia la derecha, estoy cambiando el margen izquierdo. Para ir a la izquierda, reduzco el valor que se vuelve negativo y para volver a la derecha lo devuelvo a cero. Pero estoy viendo una animación irregular, incluso en Chrome, que espero que tenga un mejor rendimiento.

Mi pregunta es, ¿sería más fácil si utilizo una técnica diferente para moverla de un lado a otro? ¿El posicionamiento absoluto sería más suave o hay algo más que debería considerar? ¿Hay algún secreto que haga una animación suave que aún no sé?

Answer 1

El margen causaría que otros elementos se recalcularan porque el margen de un elemento afecta la posición de otros elementos a su alrededor.

El posicionamiento absoluto (en su propio zIndex) seguiría causando el repintado de otros elementos, pero sería menos costoso en términos de cálculo de los objetos a su alrededor.

Esta charla da una buena idea de cómo funcionan los componentes internos del navegador/DOM

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

Answer 2

que he tenido buenos resultados usando el jQuery "flexibilización" plug-in, documentation here.

Esto le permite aplicar varios movimientos suavizados, como un seno, rebote, elástico, acelerar y así sucesivamente, a un elemento html.

Está utilizando las mismas técnicas que menciona debajo del capó, pero se ocupa del desordenado posicionamiento absoluto/relativo para usted. También es un navegador cruzado y se ha optimizado en nuevas versiones.

Sin embargo, una de las mejores ventajas de usar easing es que puede ayudar a que incluso las animaciones de framerate bajo se vean más impresionantes.