0

我试图模仿出现在Gumroad 主页上的标题文本中存在的功能，其中包含旋转/插入和退出的文本行的组件。随着新文本的加入，保持不变的文本会动态水平移动。

我在 stackoverflow 上找到了一个回答类似问题的答案，请参见此处的答案。但问题是该解决方案使用绝对定位，我需要避免使用它，因为我想使用 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!

我想出的问题是，随着新文本的插入，保持不变的文本会垂直移动。

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

4

1 回答 1

0

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

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

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

查看更新的小提琴

于 2013-07-09T15:56:22.903 回答