jQuery margin-left of each previous element

Question

I have 5 images and on click I am trying to animate them next to each other, 50px apart.

Currently I am animating the first child and all the others 50px left but all on top of each other.

Here is my script:

var fadedur = 200,
    fadeop = 0.5,
    imgwidth = 220,
    imgleft = 40,
    imgfirst = -200,
    imgfh = -100;

$('img').on('click', function(){
    $('img').css('position','absolute').css('display','block');

    $('.cs').find(':first-child').stop().animate({
            "marginLeft": imgfirst,
            "margin-top": imgfh,
        }, 300);

    $('.cs').find(':first-child').next('img').each(function() {         
        $(this).stop().animate({
            "marginLeft": imgfirst + imgwidth + imgleft,  // imgfirst should
            "margin-top": imgfh,                          // be something that
        }, 300);                                          // states prev()
    });

});​

and this is my fiddle: http://jsfiddle.net/STgQC/

I am trying to make them look like this:

So basically I need something that would say:

Animate to position of previous element + image width + 50px left.

Answer 1

$('.cs').find(':first-child').next('img') will at most match one element so its pointless to call each on it.
Check out this updated fiddle http://jsfiddle.net/STgQC/1/, is this the behaviour you're looking for?