javascript - 让元素的子项分别但有序地进行动画处理

我的父div中有三个子div元素

<div id="fatherDiv">
    //First Div
    <div class="childrenDiv"></div>
    //Second Div
    <div class="childrenDiv"></div>
    //Third Div
    <div class="childrenDiv"></div>
</div>

我试图让每个孩子按照他们通过jQuery的顺序进行动画处理。因此，第一个div将自己制作动画，然后第一个完成后第二个将移动，第二个完成后最后一个将移动。我该怎么做？



编辑

抱歉，要澄清一下，当我说动画时，我的意思是.animate（）;。在此示例中，我想我们可以使其向下移动，例如10个像素。

最佳答案

Fiddle

这应该做的工作。

function anim($child) {
    //look for the next sibling
    var $next = $child.next('.childrenDiv');
    $child.animate({
        'top':'+=10px'
    }, function() {
        //if there was a next child, then animate it
        if ($next.length > 0)
            anim($next);
    });
}

//start the animation with the first .childrenDiv child of #fatherDiv
anim($('#fatherDiv .childrenDiv:first-child'));

我们只是声明了一个称为anim的小方法，该方法使用一个循环回调来选择下一个.childrenDiv（如果有）并将其设置为动画。我们使用#fatherDiv的第一个子元素来调用它。

这只是基本的递归，基本情况是没有下一个要进行动画处理的同级对象。