在激活一個單詞時移動文本

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%;
}

然后，您可以獲取復制版本的寬度，並將其用作動畫的新寬度。