Les dejo el codigo de un div animado en javascript, no en el sentido de moverse sino en el sentido de la forma de aparecer en la pagina, abajo el video.
Como se ve en el video uso el div de abajo como boton y tal que al clickear en el aparecen y desaparecen lentamente los div de arriba.
abajo el codigo
La explicacion del codigo la pueden encontrar en mi blog
http://programacomoyo.blogspot.com.ar/2013/03/div-animado-buenas-gente-en-este.html
Como se ve en el video uso el div de abajo como boton y tal que al clickear en el aparecen y desaparecen lentamente los div de arriba.
abajo el codigo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
body {background-color:white;
background-image:url(file:/programatodo/imagenes/fondo.jpg)}
.uno {position:absolute;
top:100px;
left:100px;
background-color:red;
width:250px;
height:300px;
opacity:0;
}
.dos {position:absolute;
top:100px;
left:400px;
background-color:blue;
width:250px;
height:300px;
opacity:0;
}
.tres {position:absolute;
top:100px;
left:700px;
background-color:blue;
width:250px;
height:300px;
opacity:0;
}
.boton {position:absolute;
top:500px;
left:300px;
height:50px;
width:50px;
background-color:#FF8040;
}
</style>
</head>
<body>
<div class="uno" id="uno">
</div>
<div class="dos" id="dos">
</div>
<div class="tres" id="tres">
</div>
<div class="boton" id="boton">
</div>
<script type="text/javascript">
var uno=document.getElementById('uno');
var dos=document.getElementById('dos');
var tres=document.getElementById('tres');
var boton=document.getElementById('boton');
var opafin=0.7900000000000005;
var a=0.00;
var aa=0.80;
function aparecer(param1)
{
var par1
par1=param1
par1.style.opacity=a;
a=a+0.01;
var b=a.toFixed(2);
if (b==0.80)
{
clearInterval(tiempo);
a=0.00;
c=uno.style.opacity;
uno.innerHTML=c;
}
}
function llamar1()
{
tiempo=setInterval('aparecer(uno)',40);
}
function llamar2()
{
tiempo=setInterval('aparecer(dos)',40);
}
function llamar3()
{
tiempo=setInterval('aparecer(tres)',40);
}
function desaparecer(param1)
{
var par1;
par1=param1;
par1.style.opacity=aa;
aa=aa-0.01;
var bb=aa.toFixed(2);
if (bb==0.00)
{
clearInterval(tiempo1)
aa=0.80;
}
}
function comprobar()
{
if(uno.style.opacity==opafin || dos.style.opacity==opafin || tres.style.opacity==opafin)
{
if (uno.style.opacity==opafin)
{
tiempo1=setInterval('desaparecer(uno)',40)
llamar2();
}
else if(dos.style.opacity==opafin)
{
tiempo1=setInterval('desaparecer(dos)',40)
llamar3();
}
else if(tres.style.opacity==opafin)
{
tiempo1=setInterval('desaparecer(tres)',40);
llamar1();
}
}
else
{
llamar1();
}
}
document.getElementById('boton').addEventListener('click',comprobar,false);
</script>
</body>
</html>
La explicacion del codigo la pueden encontrar en mi blog
http://programacomoyo.blogspot.com.ar/2013/03/div-animado-buenas-gente-en-este.html