从底部到顶部滑动div

Question

我想从底部到顶部滑动div。我有3个div。在这前两个是可见的，

上点击：

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. 

检查： - http://jsfiddle.net/2cz5v/5/

工作了3次点击，然后开始交换divs。请帮助我。

Answer 1

我把你的divs的初始位置，并将它们放在一个数组中，然后让这些初始位置之间的点击函数动起来。

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 
    } 
]; 

再后来就在update语句

$("#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

Answer 2

你可以CSS3 transitions旋转组合的类一个相当简单的解决方案

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; 
} 

的JavaScript/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