El código tiene un par de problemas:
- Como todas las animaciones tienene el mismo tiempo para el
setTimeout
entonces todas se ejecutarán al mismo tiempo.
- 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>
$("#b"+num).animate({ opacity: "1" }, slow )
solamente sin el otro animate?