Question

好吧所以现在就是这里的交易我有一个固定高度为182 x 182像素的div，它们向左浮动，所以它们是水平对齐的。我需要发生的是，一旦点击这些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。（反之亦然）

动画divs水平到垂直

1 个答案: