I have 4 images (logo-1, logo-2, logo-3 and logo-4) and I want to show them one after the other when I click on a button.

First, I set the height of images to 0 to show them with easeOutBounce effect.

I'm using animate function, but the four images are shown at the same time.

How can I concatenate the animations?

```
<script>
function mostrar(num_logo) {
    if (num_logo <= 4) {
        $("#logo-"+num_logo)    
            .stop().animate(
                {height: '218px'},
                {queue:false, 
                 duration:1000, 
                 easing: 'easeOutBounce',
                 complete: mostrar(num_logo+1)}                             
            );

    }
}
    $(function() {
        // run the currently selected effect
        function runEffect() {

            for (i=1;i<=4;i++) {
                $("#logo-"+i).css('height', '0px');
            }   
            mostrar(1);

        };

        $( "#button" ).click(function() {
            runEffect();
            return false;
        });

    });
</script>

```