Question

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?

Answer 1

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)

Answer 2

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.