jQuery 动画以将 div 重新排列到它们的目标？

Question

我有两个相同的 div 网格。一个网格是绝对的，所以它覆盖了第一个。将较低的网格视为目标。我正在尝试让上方网格上的 divs 将位置动画化到它们相应的目标。虽然动画有效，但它似乎只适用于一个 div 并且它正在推动所有其他人。我想要的是让每个 div 动画到它们相应的目标位置。

$(".item").each(function(i) {

  var itemNumber = $(this).attr("id").substring(4);

  $("#item" + itemNumber).animate({
    top: $("#spot" + itemNumber).position().top,
    left: $("#spot" + itemNumber).position().left
  }, 3000);

});

* {
  box-sizing: border-box;
}
.contentWell {
  position: relative;
  width: 410px;
  height: 410px;
}
.listContent {
  float: left;
  width: 100%;
}
#items {
  position: absolute;
}
.spot,
.item {
  width: 200px;
  height: 200px;
  padding: 5px;
  margin-bottom: 5px;
  margin-right: 5px;
  float: left;
  font-family: sans-serif;
}
.spot {
  border: 3px solid aqua;
  color: aqua;
}
.item {
  border: 1px solid blue;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<section class="contentWell">
  <div id="spots" class="listContent">
    <div class="spot" id="spot0">0</div>
    <div class="spot" id="spot1">1</div>
    <div class="spot" id="spot2">2</div>
    <div class="spot" id="spot3">3</div>
  </div>
  <div id="items" class="listContent">
    <div class="item" id="item3">3</div>
    <div class="item" id="item1">1</div>
    <div class="item" id="item0">0</div>
    <div class="item" id="item2">2</div>
  </div>
</section>

将不胜感激。一个解释将是巨大的，因为我已经不知所措了。谢谢

Answer 1

我认为 position: absolute; 而不是 position: relative; CSS 规则 .item 元素可以解决这个问题，因为您想将它们 准确地 放置在相应的 spot 位置元素是。 relative 元素总是相互推挤。

哦，你可以安全地删除 #item { position: absolute; } 行，因为 children 需要绝对定位而不是 parent 容器元素。

$(".item").each(function(i) {

  var itemNumber = $(this).attr("id").substring(4);

  $("#item" + itemNumber).animate({
    top: $("#spot" + itemNumber).position().top,
    left: $("#spot" + itemNumber).position().left
  }, 3000);

});

* {
  box-sizing: border-box;
}
.contentWell {
  position: relative;
  width: 410px;
  height: 410px;
}
.listContent {
  float: left;
  width: 100%;
}

.spot,
.item {
  width: 200px;
  height: 200px;
  padding: 5px;
  margin-bottom: 5px;
  margin-right: 5px;
  float: left;
  font-family: sans-serif;
}
.spot {
  border: 3px solid aqua;
  color: aqua;
}
.item {
  position: absolute;
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<section class="contentWell">
  <div id="spots" class="listContent">
    <div class="spot" id="spot0">0</div>
    <div class="spot" id="spot1">1</div>
    <div class="spot" id="spot2">2</div>
    <div class="spot" id="spot3">3</div>
  </div>
  <div id="items" class="listContent">
    <div class="item" id="item3">3</div>
    <div class="item" id="item1">1</div>
    <div class="item" id="item0">0</div>
    <div class="item" id="item2">2</div>
  </div>
</section>

希望这对您有所帮助。

更新：

看看这个 jsFiddle 例如。它通过拾取 .spot[=55 的 indices 来设置 .item 元素的初始位置=] 元素并使用它们的 top 和 left 值。这是您要找的吗？

jQuery 动画以将 div 重新排列到它们的目标？

jQuery Animate to reshuffle divs to their targets?

css

jquery

position

jquery-animate