jQuery Animate 将 div 重新调整为目标？

Posted 2023-05-08

【中文标题】jQuery Animate 将 div 重新调整为目标？

【英文标题】：jQuery Animate to reshuffle divs to their targets?

【发布时间】：2015-09-26 11:24:39

【问题描述】：

我有两个相同的 div 网格。一个网格是绝对的，因此它覆盖第一个网格。将较低的网格视为目标。我试图让上部网格上的 div 将位置设置为相应目标的动画。虽然动画有效，但它似乎只适用于一个 div 并且它正在推动所有其他 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>

我们将不胜感激。一个解释将是巨大的，因为我非常困惑。谢谢。

【问题讨论】：

只是为您提供几个建议：(1) 请查看 GSAP 以满足您的所有动画需求。 (2) 避免为 TRBL 属性设置动画，而是始终尝试为 translate 设置动画，因为它是 more performant.

【参考方案1】：

我认为在 .item 元素的 CSS 规则中使用 position: absolute; 而不是 position: relative; 可以解决此问题，因为您想要将它们准确地定位在相应的spot元素所在的位置。 relative 元素总是会在这里和那里相互推动。

哦，您可以安全地删除 #item position: absolute; 行，因为它是需要绝对定位的子元素，而不是父容器元素。

$(".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元素的索引并使用它们的top.item元素的初始位置/strong> 和 left 值。这是你要找的吗？

【讨论】：

谢谢塔希尔，你是对的。然而，绝对的正方形都从左上角开始并动画。我需要他们从他们现有的位置开始并为他们的目标设置动画。所以也许我更大的问题是弄清楚如何使用绝对定位而不是相对定位来进行网格布局？

那么我认为最初通过 javascript 定义它们也可以。使用.css(...) 启动，然后使用.animate(...)。你不觉得这样行吗？

能否详细说明“使用 .css(...) 启动”？

在我的回答中添加了上面的 Update 并带有指向小提琴的链接。

对@Layne 有帮助吗？它解释了我所指的.css(...) 的用法吗？