Ayuda con funcion para hacer vibrar un div

[Tecktonikrazy]

Hola, estoy haciendo un script para hacer vibrar un div. Este es el codigo:

HTML:

Código HTML:

<div id="box"></div>

<input type="button" value="Zumbido" onclick="buzz()"> 

CSS:

Código CSS:

#box{
position: relative;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: #AAAAAA;
border: 1px solid #777777;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
 

JAVASCRIPT:

Código Javascript:

var buzzed = document.getElementById('box');
 
function buzz(){
 
buzzed.style.top = 5;
 
setTimeout("buzzed.style.left = 5;",50);
 
setTimeout("buzzed.style.bottom = 5;",50);
 
setTimeout("buzzed.style.right = 5;",50);
 
setTimeout("buzzed.style.top = 5;",50);
 
setTimeout("buzzed.style.left = 5;",50);
 
setTimeout("buzzed.style.bottom = 5;",50);
 
setTimeout("buzzed.style.right = 5;",50); 
}
 

Lo que hace la funcion buzz() es cambiar el valor de la propiedad css "top" a 5, de "left" a 5 y asi continuamente 2 veces, dando el efecto de que el div "box" esta vibrando, pero no me funciona, lo unico que pasa al dar click en el boton es que solo se mueve 5 pixeles hacia abajo y 5 hacia la derecha y nada mas, ahi se queda, cual es el problema? o de que otra forma puedo hacer esta funcion?

[zerokilled]

es normal que solo vea el desplazamiento de 5 pixeles o incluso ninguno según sea el navegador. notese que siempre le estas dando el mismo valor a las propiedades left, right, top y bottom. además que las funciones setTimeout se interpretan todas al mismo tiempo. en la forma mas básica tienes que invocar una función de forma recursiva con un delay. la función asigna los valores a las propiedades (left|right|top|bottom) y el delay (setTimeout) invoca la misma función.

si quieres tener una mejor idea, busca por "temblar ventanas" (javascript shaking window), este tipo de script ha existido desde el boom de dhtml.

[MaBoRaK]

loading...............


Lo que pasa es que no estas respetando el orden de ejecución de las funciones.

Código PHP:

  setTimeout("buzzed.style.left = 5;",50); 
setTimeout("buzzed.style.bottom = 5;",50); 
setTimeout("buzzed.style.right = 5;",50); 
setTimeout("buzzed.style.top = 5;",50); 
setTimeout("buzzed.style.left = 5;",50); 
setTimeout("buzzed.style.bottom = 5;",50); 
setTimeout("buzzed.style.right = 5;",50);  
   

NO, está mal, lo que deberias hacer es:

Código PHP:

  setTimeout(function(){ 
  buzzed.style.left = 5; 
  setTimeout(function(){ 
       buzzed.style.bottom = 5; 
       //aca el siguiente movimiento 
   },50); 
},50);  
   

de esta forma tendrás un orden en la ejecución del efecto de zumbido, caso contrario TODO ocurrirá en una sola pasada y no habrá zumbido ni nada...


Saludos.


connection closed.