Question

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

小提琴演示：DEMO

我想连续激活3个动画。

步骤：

以500
然后将导航div A从顶部0移动到顶部50
与此同时2.最后在子导航div 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

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。

连续激活div

1 个答案: