Question

我正在尝试模仿Gumroad's homepage上显示的标题文本中存在的功能，该文本包含旋转/放入和退出的文本行的组件。当新文本被删除时，保持不变的文本会动态地水平移动。

我在stackoverflow上找到了一个回答类似问题see that answer here的答案。但问题是该解决方案使用绝对定位，我需要避免使用它，因为我想使用Twitter Bootstrap并需要文本响应。

如果可能的话，我想用Jquery来实现这个目标（而不是CSS3），我想出了一些接近我需要的东西，你可以在JSFiddle上看到。

<h2>
Enjoy this rotation
<span id="dynamic-text-wrapper">
    <span id="old-text">from the comfort of your home</span>
    <span id="new-text">from the comfort of your home</span>
</span>
today!

我提出的问题是，在新文本被删除时，保持不变的文本会垂直移动。

BONUS：我还希望文字右侧的文字能够根据放入的文字的尺寸向左或向右滑动，但我不会甚至知道从哪里开始弄清楚如何实现这一目标。如果有人能够指出我可以使用的方向，那么我可以阅读文档，我将不胜感激！

Answer 1

你应该做的是包装你的“享受这个轮换”和“今天！”跨度中的文本并应用这样的类：

.static-text {
    display: inline-block;
    vertical-align: top;
}

另外，请务必将vertical-align: top;添加到#old-text和#new-text元素中：

<强> See updated fiddle

使用jquery在文本中旋转/删除

1 个答案: