[SOLUCIONADO] Problema con addEventListener!

[berkeleyPunk]

No se me ocurrió una forma sucinta de referenciar mi problema en un título. Perdón.

La idea es esta:
Tengo 3 divs: dos en forma de cuadro y el otro en círculo. Quisiera que al darle clic a un cuadrado se traslade el círculo 100px en Y. Y que al darle clic al otro cuadrado se repita la acción, a saber, que el mismo círculo se mueva desde donde estaba originalmente y corra los mismos 100px en Y.

El código que tengo no hace lo que quiero, porque al darle click al 2do cuadrado, el círculo ya está 100px en Y. ¿Cómo se le hace para que de alguna manera se reinicie la función que mueve el círculo?

Aquí el código que llevo:

Código CSS:

#caja1, #caja2, #caja3 {display:inline-block; width:100px; height:100px; background-color:#999;}
#bola {width:100px; height:100px; background-color:black; border-radius:50px;}
 

Código Javascript:

window.onload = function()
{
  caja1 = document.getElementById("caja1");
  caja2 = document.getElementById("caja2");
  bola  = document.getElementById("bola");
  
  caja1.addEventListener("click", moverBola, false);
  caja2.addEventListener("click", moverBola, false);
  
  
  function moverBola()
  {
      bola.style.WebkitTransform = "translateY(100px)";
  }
}
 

Código HTML:

<div id="caja1">Caja 1</div>
  <div id="caja2">Caja 2</div>
 
  <div id="bola"></div>
 

Estuve googleando y vi que quizá, talvez, el removeEventListener sirva a mi propósito, pero el caso es que no he logrado hacer que funcione.
Ya intenté hacerlo con animaciones CSS, de modo que cuando se dé clic se anime la ida. El resultado de esto es que sólo se anima la ida en el 1er clic. En el 2do clic ya no se anima nada. Imagino que porque la bola ya está en el destino y no en el origen. ¿Pero cómo hacer que a cada clic, se reinicie el movimiento de la bola?

Alguna idea?

Saludos cordiales

[Alexis88]

Se me ocurre hacerlo mediante un pseudo-atributo, el cual iría variando su valor y dependiendo de dicho valor, la bola sube o baja.

La bola tendría un pseudo-atributo, como puede ser data-translate y el valor "arriba":

Código HTML:

<div id="bola" data-translate="arriba"></div>
 

En la función, verificas el valor de dicho pseudo-atributo y según sea éste, la bola subirá o bajará:

Código Javascript:

function moverBola()
{
    if (bola.getAttribute("data-translate") == "arriba")
    {
        bola.style.WebkitTransform = "translateY(100px)";
        bola.setAttribute("data-translate", "abajo");
    }
    else
    {
        bola.style.WebkitTransform = "translateY(0px)";
        bola.setAttribute("data-translate", "arriba");
    }
}
 

Así es como se ve en ejecución: http://jsbin.com/ItAGAgU/2

Saludos

[berkeleyPunk]

Iniciado por Alexis88

Se me ocurre hacerlo mediante un pseudo-atributo

Gracias por responder, maestro Alexis88. Mi problema era más bien otro. El ejemplo que pusiste aquí http://jsbin.com/ItAGAgU/2 regresa la bola al lugar anterior, dependiendo de dónde esté.

Lo que yo quería era que se reiniciara la misma animación, el mismo movimiento que se ejecuta en la función. Por ejemplo: Tenemos un botón que al darle clic se ejecuta una función que lanza un alert. Cada vez que se presiona el botón salta el alert (siempre y cuando se cierre el alert). Si no se cierra el alert y así se da clic al botón, evidentemente no va a saltar ningún alert, porque ya hay uno abierto. Imagino que esto es lo que me pasa con mi ejemplo, que al darle clic al 2do cuadro no se ve la animación de 0px a 100px, porque la bola ya está en 100px.

Imaginaba que Javscript tenía una especie de función especial para hacer que el elemento que se anima mediante una función, se re-anime cuando se vuelve a ejecutar la misma función.

[Alexis88]

En ese caso, puedes darle inicialmente una posición cero, retardas unas milésimas de segundo la siguiente acción y luego haces bajar la bolita 100px.

Código Javascript:

var caja1 = document.getElementById("caja1"),
    caja2 = document.getElementById("caja2"),
    bola  = document.getElementById("bola");
 
function moverBola()
{
    bola.style.WebkitTransform = "translateY(0px)";
    setTimeout(function(){
        bola.style.WebkitTransform = "translateY(100px)";
    }, 100);
}
  
caja1.addEventListener("click", moverBola, false);
caja2.addEventListener("click", moverBola, false);
 

Y con esto, ya no son necesarios los pseudo-atributos, por lo que puedes eliminar data-translate de la bolita. Con setTimeout, ejecuto la bajada de la bolita luego de 100 milésimas de segundo después de que la haya dejado en su posición inicial. Puedes modificar el tiempo de retardo a tu gusto.

Así se ve: http://jsbin.com/ItAGAgU/3

Saludis

[berkeleyPunk]

Iniciado por Alexis88

En ese caso, puedes darle inicialmente una posición cero, retardas unas milésimas de segundo la siguiente acción y luego haces bajar la bolita 100px...

Algo parecido se me había ocurrido inicialmente, pero no lo hice porque, te comento, creía que JS tenía una función especial para reiniciar todo. Así como pones el código se ejecuta bien. La bronca viene si le pones transiciones CSS para que se vea el movimiento, por ejemplo a #bola: -webkit-transition:all ease 1s;

Pero haciendo unos cambios, se logra ver la animación:

Código CSS:

#caja1, #caja2, #caja3 {display:inline-block; width:100px; height:100px; background-color:#999;}
#bola {
    width:100px;
    height:100px;
    background-color:black;
    border-radius:50px;
}
 
@-webkit-keyframes ida
{
    0%   {-webkit-transform:translateY(0px);}
    100% {-webkit-transform:translateY(100px);}
}
@-webkit-keyframes vuelta
{
    0%   {-webkit-transform:translateY(100px);}
    100% {-webkit-transform:translateY(0px);}
}
 

Código Javascript:

window.onload = function()
{
  caja1 = document.getElementById("caja1");
  caja2 = document.getElementById("caja2");
  bola  = document.getElementById("bola");
  
  caja1.addEventListener("click", moverBola, false);
  caja2.addEventListener("click", moverBola, false);
  
  
  function moverBola()
  {
      bola.style.WebkitAnimationName = 'vuelta';
      bola.style.WebkitAnimationDuration = '1ms';
      bola.style.WebkitAnimationTimingFunction = 'ease';
      bola.style.WebkitAnimationIterationCount = '1';
      bola.style.WebkitAnimationFillMode = 'forwards';
 
      setTimeout(function()
      {
          bola.style.WebkitAnimationName = 'ida';
          bola.style.WebkitAnimationDuration = '1s';
          bola.style.WebkitAnimationTimingFunction = 'ease';
          bola.style.WebkitAnimationIterationCount = '1';
          bola.style.WebkitAnimationFillMode = 'forwards';
          
      },1);
  }
}
 

Saludos!