我正在研究文本效果,但过渡并不完全符合我的喜好.
我正在替换一个居中文本行中的单个单词,我将旧单词淡出而新单词淡入,但周围文本“跳转”.我已经尝试了一段时间来弄清楚如何通过在边距或宽度上使用动画来以某种方式滑动到它的新位置,但我似乎无法弄明白.
这是我现在拥有的JSfiddle http://jsfiddle.net/DEk7m/3/
我想要达到的目标类似于这里的大标题：https://gumroad.com/
以下是代码：
HTML：
<h1 id="changingtext">This is <span>changing</span> text</h1>
CSS：
h1 {
text-align: center;
font-family: helvetica,arial,sans-serif;
}
JavaScript(使用jQuery)：
$(function() {
var t1 = new Array("changing","dynamic","cool");
var i = 0;
var tid = setInterval(
function() {
$("#changingtext span").animate({'opacity': 0},1000,function () {
$(this).text(t1[i]);
}).animate({'opacity': 1},1000);
if(i < t1.length -1)
i++;
else i = 0;
},3000 );
});
非常感谢！
解决方法
您的演示中缺少宽度,看看这个,
HTML
<body>
<h1><span id="chkWidth" style="display: none;"></span></h1>
<h1 id="changingtext">This is <span>changing</span> text</h1>
</body>
脚本
$(function() {
var t1 = new Array("changing","cool");
var i = 0;
var width;
var tid = setInterval(
function() {
$("#changingtext span").animate({'opacity': 0},function () {
$(this).text(t1[i]);
width = $('#chkWidth').text(t1[i]).width();
$(this).animate({'opacity': 1,'width': width},1000);
});
if(i < t1.length -1)
i++;
else i = 0;
},3000 );
});
http://jsfiddle.net/DEk7m/8/
希望这会帮助你.