Question

This will animate the second image after the first animation is complete:

<script type="text/javascript">
        $(document).ready(function () {

            $('#image1').show("slide", { direction: 'left' }, 1000,
             function() { $('#image2').show("slide", { direction: 'left' }, 1000)});

    </script>

If I have four images I tried below – and only the first two images animate.

<script type="text/javascript">
        $(document).ready(function () {

            $('#image1').show("slide", { direction: 'left' }, 1000,
             function() { $('#image2').show("slide", { direction: 'left' }, 1000)},
             function () { $('#image3').show("slide", { direction: 'left' }, 1000)},
             function () { $('#image4').show("slide", { direction: 'left' }, 1000)});

    </script>

So what would be an effective way to animate all the images (4) in sequence?

Answer 1

$('#image1').show("slide", { direction: 'left' }, 1000, function() {
    $('#image2').show("slide", { direction: 'left' }, 1000, function () {
        $('#image3').show("slide", { direction: 'left' }, 1000, function () { 
            $('#image4').show("slide", { direction: 'left' }, 1000);
        });
    });
});

you could also do:

slide(1);
function slide(id){
    if(id<5){
        $('#image'+id).show("slide", { direction: 'left' }, 1000, function(){ slide(id+1));
    }
}