0

我在父 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 个像素。

4

2 回答 2

4

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。

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

于 2013-09-13T19:07:11.487 回答
1

来自jQuery UI .animate() 文档

只需通过完整函数使用回调，以您喜欢的任何顺序执行动画。

功能齐全

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

于 2013-09-13T19:11:40.037 回答