javascript - 动画 div 水平到垂直

Question

好吧，这就是现在的交易，我有一个固定高度为 182 x 182 像素的 div，它向左浮动，因此它们水平对齐。我需要做的是，一旦这些 div 中的一个被点击，我需要它们全部从水平到垂直(如果可能)进行动画处理。如果你能给我指点一个简单的插件或写出很棒的代码，谢谢!

例子:

|-------| |-------| |-------| 
|   1   | |   2   | |   3   | <-- Box 1 is clicked, boxes 2 and 3 need to 
|_______| |_______| |_______|     be animated vertically don't necessarily  
              |                   have to move in straight lines they can
|-------|     V         |         float over or on top of eachother as long as
|   2   |   <--         |         they animate from horizontal to vertical.
|_______|               |
                        |
|-------|               V
|   3   |      <----
|_______|

Answer 1

我一直喜欢这样写剧本。 JSFiddle 目前有很多问题，所以用 codepen 代替:

http://codepen.io/anon/pen/yIhDK

以及以后保存的代码

HTML:

<div id="boxcontainer">
  <div class="box box1"></div>
  <div class="box box2"></div> 
  <div class="box box3"></div>
</div>

CSS:

#boxcontainer {
  position: relative;
}
.box {
  width: 182px;
  height: 182px;
  border: 5px solid black;
  margin: 5px;
  float: left;
  position: relative;
}

JS:

$(function(){
  $(".box1").click(function(){
    $(".box").each(function(){
      var width = $(this).outerWidth(true),
          height = $(this).outerHeight(true),
          nrTop = Math.floor($(this).position().top / height),
            nrLeft = Math.floor($(this).position().left / width),
          top = (nrLeft-nrTop)*height,
          left = (nrTop-nrLeft)*width;
      console.log(width, height, nrTop, nrLeft, top, left);
      $(this).animate({
        "top": "+="+top+"px",
        "left": "+="+left+"px"
      }, "slow");
    });
  });
});

其背后的思想是对某个盒子计算它是左起第n个盒子，并把它放在从上数第n个位置。 (反之亦然)