0

我对 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>
4

1 回答 1

0

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

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

对于我调整span为具有display, text-align&width设置的 CSS：

span {
    color:red;
    display: inline-block;
    text-align:center;
    width: 120px;
}
于 2013-01-26T06:19:40.490 回答