Javascript 激活一行中的div

我不是jQuery专业人士，但我尽可能多地对其进行体验

小提琴演示：

我想连续激活3个动画

步骤：

将导航分区B从200扩展到250，速度从500

然后将导航分区A从顶部0移动到顶部50

同时作为2。最后，将子导航分区C从前50滑到前50

当我单击另一个导航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

我没有真正了解你想要的细节。但下面是一个示例，说明如何在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，必须使其

位置：relative

或。这是你的电话号码