The code has a couple of problems:
As all animations have the same time for the setTimeout then all will run at the same time.
When you create the setTimeout you are passing num as a parameter and then use it as if it were a specific value when it really is an array.
The first thing you could solve by giving it making the timer increase with each iteration of the loop for ; and the second you can solve by passing the specific value that corresponds to the array.
With those changes, it would look like this:
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>
Edit from the comments below.
The problem is not using num , which will be available because it is a global variable; the problem is that you were using num without anything else, when you should use num[i] which is the specific value within the array; then when the setTimeout is called the value of i would have changed and the result would not be as expected.
That happens because i is being declared with a var then its scope is global and will continue to exist when the setTimeout is launched and with a value (3) that does not apply to you. The same would happen if I define the variable numval .
A cleaner solution would be to define the i with a let instead of a var , then it will work for you (although you will have to change num for 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>