Javascript 文本自动移动以适应动画相邻文本（jquery）：如何平滑？

我正在使用jquery循环浏览单词。自然，单词大小会发生变化，导致其旁边的非动画文本移位。有没有办法使这个位置的变化平稳

我所拥有的：

我想说的是：

查看文本如何平滑移动以适应循环的单词，而不是突然移动

<div>
<span id="changerificwordspanid">awesome</span>
 <span>This is so</span>

试试这样的东西

试试这样的东西

---

这很有可能缩小，但这是基本的想法。哎呀，我无意中删除了溢出-x:隐藏。现在再次超级平滑。您完全可以在调用$（this）.html（…）之前获取旧宽度，然后获取新宽度，然后立即设置宽度，然后将动画设置为文本的正确宽度，这样就不需要隐藏跨距了。这非常有效！我真的很感谢你花时间解释。干杯我现在出去了，但是考虑把它应用到句子中的几个单词上，然后把句子集中在一些容器里。很有可能这会缩小，但这是基本的想法。哎哟，我已经删除了溢出流X：隐藏的意外。现在再次超级平滑。您完全可以在调用$（this）.html（…）之前获取旧宽度，然后获取新宽度，然后立即设置宽度，然后将动画设置为文本的正确宽度，这样就不需要隐藏跨距了。这非常有效！我真的很感谢你花时间解释。干杯我现在出去了，但是考虑把它应用到句子中的几个单词上，然后把句子集中在某个容器里。

(function(){
var words = [
    'awesome',
    'incredible',
    'cool',
    'fantastic'
    ], i = 0;
setInterval(function(){
    $('#changerificwordspanid').fadeOut(function(){
        $(this).html(words[i=(i+1)%words.length]).fadeIn();
    });
}, 2000);

})();

<div> 
   <div id='words' style='visibility:hidden'>
       <span>awesome</span>
       <span>incredible</span>
       <span>cool</span>
       <span>fantastic</span>
   </div>

   <span id="changerificwordspanid" style='overflow-x:hidden'>awesome</span>
   <span>This is so</span>
</div>

(function () {
    var words = $('#words span').map(function(i, obj) { return { width: $(obj).width() + 'px', text: $(obj).html() } });

    var i = 0;
    setInterval(function () {
        $('#changerificwordspanid').animate({ opacity: 0.0, width: words[i].width }, 
                                            400, function () {
            word = words[i = (i + 1) % words.length];
            $(this).html(word.text);
            $(this).animate({ opacity: 1.0, width: word.width });
        });
    }, 2000);

})();