entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

0voto

Animación mediante función intervalo con JavaScript

Tengo el siguiente panel (DIV):

<div id='panel' style='width:10px;height:10px;left:0;position:absolute;'></div>

¿Cómo puedo hacer que el panel se mueva a la derecha durante 5 segundos 2 pixeles a la vez?

2 Respuestas

0voto

Peter Puntos150480

Con Javascript sería algo así:

var panel = document.getElementById('panel'),
    iteracion = 0,
    maxiteracion = 5000/100,
    timer = setInterval(function() {
        panel.style.left = parseInt(panel.style.left) + 2;
        if(iteracion++>maxiteracion)
             clearInterval(timer);
    },100)

2votos

Para este tipo de cosas lo más fácil es usar jquery,

Con esta instrucción moverias el DIV 100 píxeles a la derecha durante 5 segundos:

$('#panel').animate({"left": "+=100px"}, 5000);

Normalmente una animación se hace de esta manera, se indica qué propiedad queremos cambiar y cuanto y en cuánto tiempo, no elegimos la cantidad de píxeles en cada iteración.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta