div를 아래에서 위로 슬라이딩

Question

div를 아래에서 위로 슬라이드하려고합니다. 3 개 사업부가 있습니다. http://jsfiddle.net/2cz5v/5/

3 클릭 근무, 그것은 시작 -이 :

가 클릭 다시

1st div get hides. 
2nd div takes 1st div position. 
3rd div takes 2nd div position. 

:

2nd div get hides. 
3rd div takes 2nd div position 
1st div takes 3rd div position. 

확인이 그 첫 번째 두에서 클릭에

, 볼 수 있습니다 divs 교환. 제발 도와주세요.

Answer 1

div의 초기 위치를 가져 와서 배열로 설정 한 다음 클릭 기능을 초기 위치 사이에서 움직이게했습니다.

나중에 업데이트 문에서 다음

var places = [ 
    { 
     top: $('#div1').offset().top, //100, 
     left: $('#div1').offset().left, //100, 
     width: $('#div1').width(), //80, 
     height: $('#div1').height(), //30, 
     opacity: 100 
    }, 
    { 
     top: $('#div2').offset().top, //200, 
     left: $('#div2').offset().left, //100, 
     width: $('#div2').width(), //80, 
     height: $('#div2').height(), //30, 
     opacity: 100 
    }, 
    { 
     top: $('#div3').offset().top, //300, 
     left: $('#div3').offset().left, //100, 
     width: $('#div3').width(), //80, 
     height: $('#div3').height(), //30, 
     opacity: 0 
    } 
]; 

그리고

$("#div"+j).animate({top: places[0].top, left: places[0].left, height: places[0].height, width: places[0].width, opacity: places[0].opacity}, 1000); 
    $("#div"+k).animate({top: places[1].top, left: places[1].left, height: places[1].height, width: places[1].width, opacity: places[1].opacity}, 1000); 
    $("#div"+l).animate({top: places[2].top, left: places[2].left, height: places[2].height, width: places[2].width, opacity: places[2].opacity}, 1000); 

는 here

당신은 아주 간단한 솔루션을 CSS3 transitions와 함께 클래스를 회전 할 수

Answer 2

example jsfiddle

그것을 밖으로 확인

HTML :

<div id="div1" class="rotate firstdiv">div #1</div> 
<div id="div2" class="rotate seconddiv">div #2</div> 
<div id="div3" class="rotate thirddiv">div #3</div>     
<button id="moveitButton">move it!</button>​ 

CSS :

... 
.rotate { 
    -webkit-transition:all .5s; 
    -moz-transition:all .5s; 
    -o-transition:all .5s; 
    -ms-transition:all .5s; 
    transition:all .5s; 
} 

자바 스크립트/jQuery를 :

var $rotateDivs = $('.rotate'); 

$("#moveitButton").click(function() { 
    $rotateDivs.each(function() { 
     var $this = $(this); 

     if ($this.hasClass('firstdiv')) { 
      $this.removeClass('firstdiv').addClass('thirddiv'); 
     } else if ($this.hasClass('seconddiv')) { 
      $this.removeClass('seconddiv').addClass('firstdiv'); 
     } else if ($this.hasClass('thirddiv')) { 
      $this.removeClass('thirddiv').addClass('seconddiv');    
     } 
    }); 
}); 

참고 : IE 10 + CSS3 전환 지원 - http://caniuse.com/#search=transitions