Ver Mensaje Individual
  #2 (permalink)  
Antiguo 26/08/2014, 10:09
Avatar de Alexis88
Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 6 meses
Puntos: 977
Respuesta: Finalizar una función en una animación

Necesitas un par de variables que te sirvan como comodines para controlar el avance/retroceso del cuadrado. Por ejemplo, veo que para avanzar, el valor de e tiene que ser diferente a 100 y para retroceder, el valor de a tiene que ser diferente a 0, entonces, solo sería cuestión de que cuando en cada caso se alcance la cifra límite, cambies el valor del comodín que corresponda al movimiento contrario, así solo cuando dicha variable tenga el valor que asignas al completar el traslado del cuadrado de un lado a otro, se podrá ejecutar el desplazamiento inverso.

Código Javascript:
Ver original
  1. flagA = false; //Comodín para avanzar
  2. flagB = false; //Comodín para retroceder
  3.  
  4. function muevete(estado){
  5.     if(estado){
  6.         document.getElementById('btn').setAttribute('onclick','muevete(false)');
  7.         atras();
  8.     }else{
  9.         document.getElementById('btn').setAttribute('onclick','muevete(true)');
  10.         adelante();
  11.     }
  12. }
  13.  
  14. function adelante(){
  15.     e = document.getElementById('cuadrado').style.left;
  16.     e = e.replace('%','');
  17.     e = parseInt(e,10);
  18.  
  19.     //Solo si el comodín de avance es 'false', se ejecuta el movimiento
  20.     if (!flagA){
  21.         if(e!=100){    
  22.             e = e + 10;
  23.             document.getElementById('cuadrado').style.left=e + '%';
  24.  
  25.             //Al alcanzar el límite, cambian los valores de los comodines
  26.             if (e == 100) {
  27.                 flagB = false;
  28.                 flagA = true;
  29.             }
  30.            
  31.             setTimeout(function(){adelante();},25);
  32.         }
  33.     }
  34. }
  35.  
  36. function atras(){
  37.     a = document.getElementById('cuadrado').style.left;
  38.     a = a.replace('%','');
  39.     a = parseInt(a,10);
  40.  
  41.     //Solo si el comodín de retroceso es 'false', se ejecuta el movimiento
  42.     if (!flagB){
  43.         if(a!==0){
  44.             a = a - 10;
  45.             document.getElementById('cuadrado').style.left=a + '%';
  46.      
  47.             //Al alcanzar el límite, cambian los valores de los comodines
  48.             if (a === 0) {
  49.                 flagA = false;
  50.                 flagB = true;
  51.             }  
  52.             setTimeout(function(){atras();},25);
  53.         }
  54.     }
  55. }

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand