使用jquery旋转/拖放文本



我正试图模仿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!

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

好处:我还希望插入文本右侧的文本根据插入文本的尺寸动态向左或向右滑动,但我甚至不知道从哪里开始想办法实现这一点。如果有人能给我指明可能使用的效果的方向,这样我就可以阅读文档了,我将不胜感激!

你应该做的是将你的"享受这次轮换"one_answers"今天!"文本包装在一个跨度中,并应用这样的类:

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

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

请参阅更新的fiddle