javascript - 连续激活div

Question

我不是 jQuery 专业人士，但我会尽可能多地尝试它。

fiddle 演示:DEMO

我想连续激活 3 个动画。

步骤:

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

3. 与2同时，最后在子导航div C中从top-50滑动到top 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
                )
           }
       );
    }
    );
   
    });
   

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

请看 fiddle 中的图片:) 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 .