文本中的jQuery Word替换动画[重复]

Question

我对 jQuery 很陌生，但我设法找到/组合了一些可以实现我想要实现的东西。

脚本循环替换文本/标题中的单词。它淡出，更新文本并再次淡入 - 但我的问题是：句子变短或变长会导致标题或整个段落的跳跃。

这是我在 jsFiddle 上的代码 http://jsfiddle.net/B2eLz/1/

有没有办法实现流畅的动画来阻止句子/段落跳跃？

谢谢

JS：

$(function(){
var words = [
        'breathtaking',
        'excellent',
        'awesome',
        'nice',
        'cool',
        'sweet',
        'extraordinary'
        ], i = 0; // i for counting

    setInterval(function(){
        $('span').fadeOut(function(){ //fadeout text
            $(this).html(words[i=(i+1)%words.length]).fadeIn(); //update, count and fadeIn
        });
    }, 2000 ); //2s
});

HTML：

<h3>This is a <span>extraordinary</span> Headline in a h3-Tag</h3>

Answer 1

问题在于<span> 本身正在褪色和崩溃，而不仅仅是其中的内容。我会稍微修改代码，因此只有<span> 中的内容会淡出，而单词跨度的实际宽度由jQuery 设置。这样内容就会消失，但<span> 本身会分流空白空间宽度而不会崩溃。将尝试分叉并看看我能做什么。

编辑： 好的，这并不完美，但问题是不同的单词会有不同的长度。但是保持<span> 相同宽度的概念确实有效。您需要根据自己的需要进行改进。这是我所做的：http://jsfiddle.net/rHtYA/17/

对于 CSS，我将 span 调整为具有 display、text-align 和 width 设置：

span {
    color:red;
    display: inline-block;
    text-align:center;
    width: 120px;
}