divs를 연속으로 활성화하십시오.

저는 jQuery 전문가가 아니지만 가능한 한 많이 샘플을 만듭니다.divs를 연속으로 활성화하십시오.

바이올린 데모 : DEMO

내가 연속으로 3 애니메이션을 활성화하려는.

단계 :

그럼 동시에 같은에서 상위 50
위에서 0 탐색 DIV A를 이동할 500
에서 속도 250 행 (200)로부터 탐색 된 div B 펼치기 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 
      ) 
     } 
    ); 
} 
); 

});

내 문제를 해결할 수있는 솔루션이 있습니까?

바이올린 : 들으

출처

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

divs를 연속으로 활성화하십시오.

답변

관련 문제