Efectos Continuos con animate

[carloshlm]

Hola tengo un documento HTML el cual tiene un botón llamado "miBoton" y al darle clic necesito que ejecuten dos animaciones sobre dos Div's distintos.

Código HTML:

<div class="capa1"></div>
<div class="capa2"></div>
<input type="button" name="miBoton" id="miBoton" value="Animar">
 

El problema es que las animaciones se ejecutan simultaneamente y yo lo que necesito es que primero ejecute la animación del primer DIV (capa1) y una vez que finalice se ejecute la animación del segundo DIV (capa2). Me interesa saber como ejecutar esas funciones consecutivamente. Gracias!!!

Este es mi código Javascript:

Código Javascript:

function anima1(capa){
$(capa).animate({
    opacity: 0.25,
    left: '500px',
    top: '200px'
  }, 2000)  
}
 
function anima2(capa){
$(capa).animate({
    opacity: 0.25,
    left: '500px',
    top: '400px'
  }, 2000)  
}
 
 
$('#miBoton').click(function(){
    anima1('.capa1');
    anima2('.capa2');
});
 

[tredio]

Código Javascript:

function anima1(capa,callback){
$(capa).animate({
    opacity: 0.25,
    left: '500px',
    top: '200px'
  }, 2000, callback)  
}
 
function anima2(capa){
$(capa).animate({
    opacity: 0.25,
    left: '500px',
    top: '400px'
  }, 2000)  
}
 
 
$('#miBoton').click(function(){
    anima1('.capa1', function(){
                      anima2('.capa2');
    });
    
});
 

[carloshlm]

Muchas gracias en verdad había estudiado un poco sobre como invocar a las funciones callback sin embargo la forma como declaraste la función anima1 resolvió mis dudas. Muchas gracias!!

[tredio]

de nada carloshlm, que bueno que te haya funcionado