jQuery Animate 上的 Divs 滑动到窗口大小之外

Posted 2023-05-08

【中文标题】jQuery Animate 上的 Divs 滑动到窗口大小之外

【英文标题】：Divs Sliding Outside Window Size on jQuery Animate

【发布时间】：2016-03-10 16:31:03

【问题描述】：

点击后我将一组 div 的位置从绝对位置更改为相对位置，以便它们滑入自己的位置。这是一个小提琴：

http://jsfiddle.net/sn9L1gr9/1/

$('div.box').click(function() 
  $(this).addClass("move");
  $(this).animate(
    'left': '160px'
  );
);

除了在进入下一行之前将额外的 div 添加到每一行之外，它可以工作。所以在 1366x768 显示器上看 jfiddle，四个窗口大小均匀，它应该是：

Div1 -- Div2 Div3 -- Div4 Div5 -- Div6 第 7 部分

但它的组织方式是：

Div1 -- Div2 -- Div3 Div4 -- Div5 -- Div6 第 7 部分

并添加滚动条。

所以我想知道如何让 div 正确中断（包括使用包含原始绝对定位 div 的列）。非常感谢。

【问题讨论】：

哇.. 看起来很酷！我找不到“额外”的 div。

【参考方案1】：

因为我知道 div 的宽度，所以我最终将它们放在一个设置为 100% 宽度的容器中，并从容器宽度中减去一个 div 的宽度：

$("#container").css('width','100%').css('width','-=170px');

http://jsfiddle.net/sn9L1gr9/2/