每个前一个元素的jQuery margin-left

Question

我有5张图片，点击后我试图将它们放在彼此旁边，相隔50px。

目前，我正在为第一个孩子制作动画，所有其他人都保持50px，但所有其他孩子都在彼此之上。

这是我的剧本：

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()
    });

});​

这是我的小提琴：http://jsfiddle.net/STgQC/

我试图让它们看起来像这样：

所以基本上我需要一些可以说的话：

动画显示上一个元素的位置+图像宽度+ 50px左侧。

Answer 1

$('.cs').find(':first-child').next('img')最多会匹配一个元素，因此无需调用每个元素。
查看此更新的小提琴http://jsfiddle.net/STgQC/1/，这是您正在寻找的行为吗？

Answer 2

.each()遍历next()的结果。在您的情况下，next()仅返回第一张图片。因此，您的代码只迭代1个图像。

我会将2次迭代合并为1次逻辑。

尝试以下（为我工作）：
也在这里小提琴：http://jsfiddle.net/FranWahl/mYRdU/1/

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');

    var newLeft = imgfirst;

    $('.cs').find('img').each(function(){
        $(this).stop().animate({
            "marginLeft": newLeft,//imgfirst + imgwidth + imgleft,
            "margin-top": imgfh,
        }, 300);

        newLeft += imgwidth + imgleft;
    });                 
});​