1

Tengo tres botones en una pagina, boton 1, boton 2 y boton 3. Además tengo una array con una secuencia [3,2,1,3]. Quiero aplicar una animacion a los botones en ese orden.Es decir, primero animar el boton 1. Cuando termine, el boton 2 ...y asi sucesivamente. El problema es que con mi código todas las animaciones se ejecutan al mismo tiempo...como puedo arreglarlo??

var num=[3,2,1];
var index=0;


for(var i=0;i<num.length;i++){
  
  setTimeout(function anim(num){
  
  $("#b"+num).animate({ opacity: "1" }, 350 ).animate({ opacity: "0.5" }, 350);
  
},2000);
  
}
button{
  
  opacity:0.5;
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b1" type="button" class="btn btn-danger">Btn 1</button>

<button id="b2" type="button" class="btn btn-danger">Btn 2</button>

<button id="b3" type="button" class="btn btn-danger">Btn 3</button>

5
  • Se ejecutan al mismo tiempo porque esta dentro de un pequeño ciclo, en realidad si se animan en el orden que tu deseas solo que es rapido y no alcanzas a identificarlo.
    – sioesi
    Commented el 11 dic. 2016 a las 17:25
  • Y como puedo arreglarlo?
    – user22178
    Commented el 11 dic. 2016 a las 17:43
  • En estos momentos no puedo probar codigo ya que estoy desde un smartphone pero me imaginaba un setTimeout(function(){ //aqui dentro tu for }, 2000); ahi son 2 segundos pero puedes agregarle mas
    – sioesi
    Commented el 11 dic. 2016 a las 17:44
  • Ahí lo probe pero no funciona :(
    – user22178
    Commented el 11 dic. 2016 a las 17:46
  • Y si sacas el setTimeout y pones $("#b"+num).animate({ opacity: "1" }, slow ) solamente sin el otro animate?
    – sioesi
    Commented el 11 dic. 2016 a las 18:21

1 respuesta 1

0

El código tiene un par de problemas:

  1. Como todas las animaciones tienene el mismo tiempo para el setTimeout entonces todas se ejecutarán al mismo tiempo.
  2. Cuando creas el setTimeout estás pasando num como parámetro y luego lo usas como si fuera un valor concreto cuando realmente es una array.

Lo primero lo podrías solucionar dándole haciendo que el temporizador se incremente con cada iteración del bucle for; y lo segundo lo puedes solucionar pasando el valor en concreto que corresponda del array.

Con esos cambios quedaría así:

var num=[3,2,1];
var index=0;


for(var i=0;i<num.length;i++){

  // asignamos el valor de la posición actual con un `let`
  let numval = num[i];
  
  setTimeout(function anim(){
    $("#b"+numval).animate({ opacity: "1" }, 350 ).animate({ opacity: "0.5" }, 350);
  }, 2000*(i+1)); // hacemos que haya una separación de 2 segundos entre cada animación

}
button{
  opacity:0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="b1" type="button" class="btn btn-danger">Btn 1</button>
<button id="b2" type="button" class="btn btn-danger">Btn 2</button>
<button id="b3" type="button" class="btn btn-danger">Btn 3</button>


Edición a partir de las comentarios de abajo.

El problema no es usar num, que sí estará disponible al ser una variable global; el problema es que estabas usando num sin nada más, cuando deberías usar num[i] que es el valor en concreto dentro del array; entonces cuando se llama al setTimeout el valor de i habría cambiado y el resultado no sería el esperado.

Eso ocurre porque i se está declarando con un var entonces su ámbito es global y seguirá existiendo cuando se lance el setTimeout y con un valor (3) que no te vale. Lo mismo ocurriría si defino la variable numval.

Una solución más limpia sería definir el i con un let en lugar de con un var, entonces ya te funcionará (aunque tendrás que cambiar num por num[i]):

var num=[3,2,1];
var index=0;


for(let i=0;i<num.length;i++){
  setTimeout(function anim(){
    $("#b"+num[i]).animate({ opacity: "1" }, 350 ).animate({ opacity: "0.5" }, 350);
  }, 2000*(i+1)); // hacemos que haya una separación de 2 segundos entre cada animación

}
button{
  opacity:0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="b1" type="button" class="btn btn-danger">Btn 1</button>
<button id="b2" type="button" class="btn btn-danger">Btn 2</button>
<button id="b3" type="button" class="btn btn-danger">Btn 3</button>

7
  • Gracias! Podrias decirme por que dentro de setTimeout no se puede acceder a la variable num, si num es una variable global?..Por que necesito usar let???
    – user22178
    Commented el 11 dic. 2016 a las 20:23
  • El problema no es usar num, que sí estará disponible al ser una variable global; el problema es que estabas usando num sin nada más, cuando deberías usar num[i] que es el valor en concreto dentro del array; entonces cuando se llama al setTimeout el valor de i habría cambiado y el resultado no sería el esperado.
    – Alvaro Montoro
    Commented el 11 dic. 2016 a las 20:31
  • Intenté usar num[i] en vez de nunmval y no puedo acceder dentro de SetTimeout....
    – user22178
    Commented el 11 dic. 2016 a las 20:42
  • Eso ocurre porque, como pongo en mi comentario anterior: "el valor de i habría cambiado y el resultado no sería el esperado"
    – Alvaro Montoro
    Commented el 11 dic. 2016 a las 20:42
  • 1
    ahh.... y por que let numval y no var numbal.
    – user22178
    Commented el 11 dic. 2016 a las 20:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.