Prefacio esto diciendo que mi problema inicial es difícil de reproducir. Breve explicación de mi problema siguiente, la pregunta está en la parte inferior.

Así que estoy usando el control deslizante múltiple Jquery para un proyecto. Aquí hay un enlace a él: Multislider

Ahora mi problema es que la animación de los elementos en movimiento parece retrasarse... A veces. Salta en lugar de moverse suavemente. La forma en que funciona el elemento es aplicando el método animate() al primer elemento y aplica una propiedad de margin-left en línea al primer .item

Con un poco de investigación, descubrí que las animaciones CSS a menudo causan problemas cuando se usan margins para la animación (entre algunas otras propiedades como arriba/abajo/izquierda/derecha, así como alto/ancho) y que es preferible usar la transform . Hasta aquí todo bien.

Este es el fragmento en el javascript que crea la animación:

 function singleLeft(){ isItAnimating(function(){ reTargetSlides(); $imgFirst.animate( { marginLeft: -animateDistance /* This is the part that causes me problems */ }, { duration: animateDuration, easing: "swing", complete: function(){ $imgFirst.detach().removeAttr('style').appendTo($msContent); doneAnimating(); } } ); }); } function singleRight(){ isItAnimating(function(){ reTargetSlides(); $imgLast.css('margin-left',-animateDistance).prependTo($msContent); $imgLast.animate( { marginLeft: 0 }, { duration: animateDuration, easing: "swing", complete: function(){ $imgLast.removeAttr("style"); doneAnimating(); } } ); }); }

Ahora, si lo entiendo correctamente, tengo que reemplazar la parte marginLeft: -animateDistance con una propiedad transformX, ¿es correcto? Pero estoy fallando en hacer que funcione.

Entonces mi pregunta es , ¿cómo puedo reemplazar la parte marginLeft: -animateDistance con transform: translateX() y agregar la variable animateDistance entre paréntesis?

He intentado algo como transform: "translateX(-$(animateDistance))" , pero eso simplemente deshabilita la animación por completo.
¿Me estoy perdiendo de algo? También estoy abierto a otras sugerencias para resolver el problema de la animación lenta, esta es solo la conclusión a la que llegué.