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

Question

我有 5 张图片，点击时我试图让它们彼此相邻，相隔 50 像素。

目前，我正在为第一个孩子和所有其他孩子设置 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;
    });                 
});​