使用 jquery 旋转/删除文本

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!

我想出的问题是，当新文本被放入时，保持不变的文本会垂直移动。

奖励：我还希望插入文本右侧的文本根据插入文本的尺寸向左或向右滑动，但我不这样做甚至知道从哪里开始弄清楚如何做到这一点。如果有人能指出我可能使用的效果的方向，以便我阅读文档，我将不胜感激！

Answer 1

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

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

还要确保将vertical-align: top; 添加到#old-text 和#new-text 元素中：

See updated fiddle