在激活一个单词时移动文本

Question

我正在制作动画文本元素。

元素更改了一部动画作品。 很像这个例子。 http://www.thepetedesign.com/demos/jquery_super_simple_text_rotator_demo.html

问题是，当我改变一个单词时，周围的其他单词突然移动，我不喜欢这样。 我正在尝试使用一种效果，使周围移动的其他单词以一种很好的方式移动。 就像在这个例子中一样。

有谁知道如何做到这一点？ 或将我链接到相关解决方案？

我正在使用HTML，CSS和JS

Answer 1

可能还有其他方法可以做到，但是我能想到的最一致的跨浏览器方法就是这样。 这是一些指导，但是代码示例会有所帮助。

您需要将动画单词包裹在一个额外的span 。 然后，您需要将外部跨度的宽度定义为动画之前的内部跨度的宽度。 如果知道宽度是多少，可以使用CSS进行操作，也可以像这样动态地进行操作：

$(outerSelector).width( $(innerSelector).width() + 'px');

对文本进行动画处理，然后对宽度变化进行动画处理：

$(outerSelector).animate({width: $(innerSelector).width() +'px'}, 500);

这实际上只能使它变小。 您可以使用此方法使单词变大，但首先需要知道单词的最终宽度。 然后，您可以只跨一个范围并执行以下操作：

$(selector).animate({width:newWidth}, 500);

如果您不担心跨浏览器的兼容性，或者可以假设使用该网站的每个人都将启用CSS 3，那么可以使用CSS来做到这一点：

selector {
    transition: width 0.5s;
}

然后，为缩小文本，您将需要像上面一样再次设置外部跨度宽度，但是在对文本进行动画处理之后，您可以简单地执行以下操作：

$(outerSelector).width( $(innerSelector).width() + 'px');

这具有相同的问题，即需要提前知道该宽度以过渡到较长的文本。 您可以使用另一个跨度相同的文本找出宽度。

.copy {
    position: absolute;
    left: -100%;
}

然后，您可以获取复制版本的宽度，并将其用作动画的新宽度。