连续激活div

我不是jQuery专业版，但我尽可能多地对它进行了采样。连续激活div

小提琴演示：DEMO

我要连续3个激活动画。

步骤：

展开从200到250中的导航的div乙从500
的速度。然后，导航DIV甲从顶部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

来源

2014-01-09 andre34

我没有真正得到你想要的东西的细节。但在这里是如何您可以在您的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。

来源

2014-01-09 16:11:35 zord

非常感谢你！ – andre34

<html> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script > 

    $(document).ready(function(){ 
    $('#start').click(function(){ 
    $(".b").animate({height:"300px"},500); 
    $(".a").animate({top:"50px"},500); 
    $(".c").animate({top:"50px"},500); 

    }); 
    $('#stop').click(function(){ 
    $(".b").animate({height:"250px"},500); 
    $(".a").animate({top:"0px"},500); 
    $(".c").animate({top:"-50px"},500); 

    }); 
    }); 

    </script> 
    <style> 
    .example { 
    width: 100%; 
    position:relative; 
    } 

    .a { 
    width: 600px; 
    height: 50px; 
    background-color: #888; 
    top:0px; 
    position:absolute;  
    } 

    .b { 
    width: 200px; 
    height: 50px; 
    background-color: red; 
    margin-left: 100px; 

    } 

    .c { 
    width: 200px; 
    height: 50px; 
    background-color: black; 
    margin-left: 100px; 
    top:-50px; 
    position:absolute; 
    } 
    #start{ 
    top:100px; 
    position:absolute; 
    } 
    </style> 
    </head> 
    <div class="example"> 
    <div class="c"></div> 
    <div class="a"> 
    <div class="b"></div> 
    </div> 
    </div> 
    <input type='button' id='start' value='start'/> 
    <input type='button' id='stop' value='stop'/> 
    </html>

此代码工作，但你需要有了解的位置

jQuery的动画顶级物业，除非位置参数给出

不工作使默认的顶部底部&在CSS &运行代码

来源

2014-01-11 12:47:59 sanjeev

非常感谢你！ :) – andre34

@ andre34如果这个答案帮助你PLZ标记为正确的 – sanjeev

回答

相关问题