Skip to main content
se añadieron 1634 caracteres en el cuerpo
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

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>


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>

Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

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>