0

我正在尝试在我的网站上创建一个动画，当用户单击链接时，该网站将主要内容 div 从页面移到左侧，并且新内容（对应于单击的链接）飞入该打开点从右边。动画完成后，原始内容块将被删除。

我几乎把它写下来了，到目前为止我所做的是使用相对定位和 jquery 来为 div 的移动设置动画。

具体来说，如果块A是原始 div，块B是替换 div，我

  1. 创建B并通过设置将其定位在屏幕右侧left:100%
  2. 使用 jquery 在 A 上设置动画right:100%以将A从屏幕左侧发送出去
  3. 使用jquery通过动画从右侧飞入Bleft:0%

问题是，这些新样式设置好后，原来A的地方还有一块空地，而B现在在那个空地下面。我如何将B推到那个空间？

4

3 回答 3

0

简短回答：我相信您position:absolute在A和B上丢失了。

长答案：如果您将容器定义为position:relative，则所有新创建的元素position:absolute都将位于容器的边界框内。在这一点上，我们可以像你说的那样将两个元素贴在一起：A onleft:0和B on left:100%。我们可以通过改变 left 的值来为两者设置动画：A离开屏幕，left:-100%B滑入（left:0这也是上一步 A 的相同位置）。

你可以在这里看到它的实际效果-> http://jsfiddle.net/MVXwT/

于 2013-08-12T19:49:40.137 回答
0

相对定位将无济于事。

然后使用绝对定位。

您可以做的是，如果您是 A 到 B 的位置，请使用 jquery 更改 A 的位置。

$("#divA").css({"position":"absolute"});

然后将其设置为您想要的位置。

于 2013-08-12T19:51:19.097 回答
0

使用绝对有一个警告，如果此内容位于具有动态位置的容器内的某个位置，您将无法保持其与页面顶部的距离。相对定位似乎是更稳健的定位，您应该更改显示或浮点值。列出使两个 div 保持在一行的可能选项：

  1. 绝对定位（位置：绝对）
  2. 浮动*（浮动：左）
  3. 内联块*（显示：内联块）

* A 和B的父容器应与A和B一样宽，以将它们包含在一行中。

于 2013-08-12T20:06:34.487 回答