连续激活 div

Question

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

小提琴演示：演示

我想连续激活 3 个动画。

步骤：

1. 将导航分区 B 从 200 扩展到 250，速度从 500
2. 然后将导航div A 从前 0 移动到前 50
名

3. 与2同时。最后在子导航分区 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
                )
           }
       );
    }
    );
    });
   

有什么解决方案可以解决我的问题吗？

请看小提琴:)中的图片感谢

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什么的。这是更新的小提琴。