Question

我在父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将自己动画，然后第二个将在第一个完成后移动，然后在第二个完成之后最后移动第三个div。我怎么能这样做？

修改

很抱歉，澄清一下，当我说动画时，我的意思是.animate（）;在这个例子中，我想我们可以让它向下移动，比如10像素。

Answer 1

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的第一个孩子来称呼它。

这只是基本的递归，基本情况是如果没有动画的下一个兄弟。

Answer 2

来自jQuery UI .animate() documentation

只需通过完整函数使用回调即可按您喜欢的顺序执行动画。

完整功能

如果提供，则完成回调函数动画完成。这对于串联不同可能很有用动画按顺序组合在一起。回调不会发送任何参数，但这被设置为动画的DOM元素。如果多个元素是动画的，回调每执行一次匹配的元素，不是整个动画的一次。

让元素的子元素单独动画，但按顺序

2 个答案: