连续激活div

Question

我不是jQuery专业人士，但我尽可能多地采样。

小提琴演示：DEMO

我想连续激活3个动画。

步骤：

1. 以500
的速度将导航div B从200扩展到250
2. 然后将导航div A从顶部0移动到顶部50

3. 与此同时2.最后在子导航div C中从顶部-50到顶部50滑动

4. 当我点击另一个导航div时，步骤1-3向后关闭。

   $(function(){
   $('.a').click(
   function(){
           $(".b").stop().animate(
               {width:"250px"},
               500,
               function(){
                   $('.b').stop().animate({width:"toggle"});
               }
           );  
   },
   $(".a").stop().animate(
               {top:"50px"},
               500,
               function(){
                   $('.b').stop().animate({top:"toggle"});
               }
           );  
   },
   function(){
       $('.c').stop().animate(
           {show:"yes"},
           500,
           function(){
                $(".a").stop().animate(
                    {backgroundPosition:"left 0"}
                    ,500
                )
           }
       );
    }
    );
   
    });
   

有没有解决我问题的解决方案？

请看小提琴中的图片:) thx

Answer 1

我并没有真正了解你想要的细节。但是这里有一个如何在你的div上连续运行动画的例子：

var $a = $(".a"),
    $b = $(".b"),
    $c = $(".c");

function anim1() {
    $b.animate({width: 250}, {duration: 500, complete: anim2});
}

function anim2() {
    $a.animate({top:"0px"}, {duration: 500, complete: anim3});
}

function anim3() {
    $c.animate({top: "0px"}, 500);
}

anim1();

另外，如果你想移动你的div，你必须让他们position: relative或something。这是updated fiddle。