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>本身正在消退＆amp;不只是折叠其中的内容。我会略微修改代码，因此只有<span>内的内容会消失，并且带有单词的span的实际宽度由jQuery设置。这样内容会消失，但<span>本身会分散空的空间宽度而不会崩溃。将尝试fork＆amp;看看我能做些什么。

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

对于CSS，我将span调整为display，text-align＆amp; width设置：

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

jQuery Word上的动画替换文本

1 个答案: