我正在研究文本效果,但过渡并不完全符合我的喜好.
我正在替换一个居中文本行中的单个单词,我将旧单词淡出而新单词淡入,但周围文本“跳转”.我已经尝试了一段时间来弄清楚如何通过在边距或宽度上使用动画来以某种方式滑动到它的新位置,但我似乎无法弄明白.
这是我现在拥有的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 );
});
希望这会帮助你.
原文地址：https://www.jb51.cc/jquery/150875.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
