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>