El código que tienes va a funcionar, pero puede presentar algunos problemas:
- Los tiempos que se le pasan a
setTimeout
y setInterval
son relativos. Cuando le dices al navegador que quieres que una función se ejecute en 5000 ó 13 milisegundos, eso no quiere que se vaya a ejecutar en 5000 ó 13 milisegundos. Puede darse el caso de que se ejecute más tarde si el navegador está ocupado realizando otras operaciones (fuente).
- El navegador se está inundando con operaciones a realizar por los
setTimeout
y setInterval
, lo que puede dar problemas si se quiere ejecutar otra función (no sólo la lógica de la animación, sino también potencialmente otras funciones).
- La duración de la animación y la distancia/movimiento a realizar pueden no ajustarse al tiempo de refresco de pantalla (el número de marcos/frames que se dibujan por segundo o fps) haciendo que se vean saltos o parpadeos indeseados.
Estos motivos pueden hacer que la animación que quieres no se vea bien: se ejecute a trompicones o dure más de lo esperado. No dando una buena experiencia de usuario o dando diferentes experiencias a diferentes usuarios.
Debido a esas limitaciones y problemas potenciales, se diseño una nueva API web: requestAnimationFrame
, que permite ejecutar código cuando se vaya a refrescar/dibujar el marco en la pantalla. De ese modo se usan mejor los recursos del sistema, y las animaciones se ajustarán mejor a los fps y se verán más fluidas y mejor.
jQuery usa requestAnimationFrame
para sus animaciones desde la versión 3. Se usaba también en versiones antiguas de jQuery (1.6), pero tuvieron que dejarlo de usar temporalmente (a partir de 1.6.3) por problemas de compatibilidad que fueron resueltos en esta última versión (fuente).
La animación que menciones en los comentarios puede hacerse con requestAnimationFrame
(fíjate que sigo usando setTimeout
para algunas cosas, limitando requestAnimationFrame
para la animación en sí):
var i = 0;
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
// función que mueve el elemento indicado de derecha a izquierda desde la posición indicada en el tiempo dado
function moverIzquierda(objeto, tiempo, distanciaInicial, distanciaFinal) {
// guardamos el tiempo inicial de la animación
let start = window.performance.now();
// calculamos la distancia que queremos mover
let distancia = distanciaFinal - distanciaInicial;
// la función que se ejecutará mientras haya una animación
function animacion(timestamp) {
// calculamos cuánto tiempo ha pasado
var progreso = timestamp - start;
// actualizamos la posición adecuada
objeto.style.left = (-Math.min(distanciaInicial + distancia * progreso/tiempo, distanciaFinal)) + "px";
// si no ha terminado la animación
if (progreso < tiempo) {
// pedimos que se ejecute el siguiente paso de la lógica de animación
requestAnimationFrame(animacion);
}
}
// lanzamos la animación
requestAnimationFrame(animacion);
}
var imagenes = document.getElementById("imagenes");
// la primera imagen se verá 2 segundos antes de ejecutar la animación
setTimeout(function() { moverIzquierda(imagenes, 3000, 0, 300) }, 2000);
// la segunda imagen se verá 2 segundos antes de ejecutar la animación siguiente
setTimeout(function() { moverIzquierda(imagenes, 3000, 300, 600) }, 7000);
#scroller {
width: 300px;
height: 100px;
position: relative;
border: 1px solid black;
overflow: hidden;
box-sizing: border-box;
}
#scroller #imagenes {
width: 900px;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
#scroller #imagenes img {
display: inline-block;
float: left;
}
<div id="scroller">
<div id="imagenes">
<img src="https://placehold.it/300x100/ff0000/ffffff/" alt="" />
<img src="https://placehold.it/300x100/00ff00/ffffff/" alt="" />
<img src="https://placehold.it/300x100/0000ff/ffffff/" alt="" />
</div>
</div>
Más información y temas relacionados:
setInterval
cambiarías la clase o el valor de CSS lo que causaría una transición más suave y limpia. Incluso podría hacerse sólo con CSS sin necesidad de JS.