Skip to main content
se añadieron 61 caracteres en el cuerpo
Origen Enlace
user22178
user22178

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[i]"#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>

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++){
  
  $("#b"+num[i]).animate({ opacity: "1" }, 350 ).animate({ opacity: "0.5" }, 350);
  
  
}
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>

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>

Origen Enlace
user22178
user22178

Animar secuencia de botones en jquery

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++){
  
  $("#b"+num[i]).animate({ opacity: "1" }, 350 ).animate({ opacity: "0.5" }, 350);
  
  
}
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>