<分区>
<分区>
我是 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>
最佳答案
问题是 <span>本身正在褪色和折叠，而不仅仅是其中的内容。我会稍微修改代码，所以只有 <span> 中的内容淡入淡出，单词跨度的实际宽度由 jQuery 设置。这样内容就会消失，但是 <span>本身分流空的空间宽度而不塌陷。将尝试 fork 并看看我能做什么。
编辑: 好吧，这并不完美，但问题是不同的词只会有不同的长度。但是保留<span>的概念相同的宽度确实有效。您需要根据自己的需要进行改进。这是我所做的:http://jsfiddle.net/rHtYA/17/
我调整的 CSS span有一个display , text-align &一个width设置:
span {
color:red;
display: inline-block;
text-align:center;
width: 120px;
}
关于jquery - jQuery Word 在文本中替换的动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14534417/