我有一个标题文字,我想把它淡入一个盒子里。 之后,副标题应在其下方淡入淡出。 一旦两者都可见,它们应该淡出,下一组应该以同样的方式淡入。
然而,我已经创建了,我对它的运行情况有疑问,也就是说,如果浏览器需要很多CPU。我的一个问题也是Javascript的递归深度。
我有以下代码(我也包含在jsfiddle中,还有CSS和HTML http://jsfiddle.net/ukewY/1/)
var no = 3;
function fadeText(id) {
// Fade in the text
$("#text" + id).animate({
opacity: 1,
left: '+=50'
}, 5000, function() {
// Upion completion, fade in subtext
$("#subtext" + id).animate({
opacity: 1,
}, 5000, function() {
// Upon completion, fade the text out and move it back
$("#subtext" + id).animate({
opacity: 0,
}, 1000, function() {
$("#text" + id).animate({
opacity: 0,
left: '+=200'
}, 3000, function() {
// Yet again upon completion, move the text back
$("#text" + id).css("left", "19%");
$("#subtext" + id).css("left", "10%")
fadeText((id % no) + 1);
});
});
});
});
}
$(document).ready(function() {
fadeText(1);
});
我的问题是,这是否是正确的方法;或者如果有更好的,也许是非递归的方式吗?
PS。由于这是一个网站的横幅,我不担心id
变大,因为人们可能已经移动了。
答案 0 :(得分:2)
递归对我来说似乎很好,但我发现了其他一些事情:
我开车了,并冒昧地将你的代码调整到以下内容:
function fadeText() {
thistext = $text.eq(titleid);
thissubtext = $subtext.eq(titleid);
thistext.animate({
opacity: 1,
left: '+=50'
}, 5000, function () {
thissubtext.animate({
opacity: 1
}, 5000, function () {
thissubtext.animate({
opacity: 0
}, 1000, function () {
thistext.animate({
opacity: 0,
left: '+=200'
}, 3000, function () {
thistext.css("left", "19%");
thissubtext.css("left", "20%");
if (titleid != $text.length - 1) {
titleid++;
} else {
titleid = 0;
}
setTimeout(fadeText, 0);
});
});
});
});
}
var titleid=0;
$(function () {
$text = $("span.floating-text");
$subtext = $("span.floating-subtext");
fadeText();
});