Concatenate effects with jQuery

Question

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>

Answer 1

Here is a jsfiddle I made to answer a very similar question: http://jsfiddle.net/jJ8vJ/ (The question can be found here: how to animate position in Order?).

The basic idea is to set an array of jQuery objects (elements you want to animate in order) and use the callback of the .animate() function to animate the elements in order

var $items     = [$('#one'), $('#two'), $('#three'), $('#four')],//stores the DOM elements to be animated in order
    item_index = 0,//stores the current index in the animation queue
    animations = {
        '0px0px'     : { left : '100px', top : '0px' },//0px0px means the element is at the top left
        '100px0px'   : { left : '100px', top : '100px' },//100px0px means the element is at the top right
        '0px100px'   : { left : '0px'  , top : '0px' },//0px100px means the element is at the bottom left
        '100px100px' : { left : '0px'  , top : '100px' }//100px100px means the element is at the bottom right
    };//this stores the conversion between where the element is and where it should animate to

//setup a function that can call itself inside the animation callback to iterate through the DOM elements to be animated
function run_animation($element) {

    //check to make sure there are more DOM elements to animate, if none are found then the process is done
    if (item_index in $items) {

        //get this element's top and left CSS properties and put them together so we can convert that to the next coordinates it needs
        var css = $items[item_index].css('left') + '' + $items[item_index].css('top');

        //now animate this element by converting the current top/left CSS properties to its next coordinates
        $items[item_index].animate({
            left : animations[css].left,
            top  : animations[css].top
        }, 1500, function () {

            //here we run this same function for the next index
            item_index++;
            run_animation($items[item_index]);
        });
    }
}

//run the animation function for the first time
run_animation($items[item_index]);

Answer 2

The answer from Jasper is good. I give you some links you should read: they explain some common mistakes you've made in your code and how to avoid them ;)

• 7 Common Javascript Mistakes or Confusions (master article)
• Premature Invocation (your main error)
• Delaying Repeatedly (it's what was explained by Jasper, but a bit differently)