使用jQuery淡出类似横幅的文本

我有一个标题文本，我想淡入一个框中。 之后，字幕应在其下方淡入。 一旦两者都可见，它们应该淡出，下一组应该以相同的方式淡入

然而，我对它的运行状况表示怀疑，也就是说，浏览器是否需要大量CPU。我关心的问题之一也是Javascript的递归深度

我有以下代码（我还包括在JSFIDLE中，以及CSS和HTML）

我的问题是这样做是否正确；或者，如果有更好的，也许不是递归的方法来实现这一点

---

注：由于这是一个网站的横幅，我不担心

id

会变得太大，因为人们可能从那时起就开始前进了。

递归对我来说似乎很好，但我发现了一些其他东西：

• 您可能希望动态读取标题的数量，而不必在脚本顶部指定标题。
• 您在每个标题中使用相同的选择器$（“#text”+id）和$（“#subtext”+id）两次。您应该只执行一次，并将其分配给变量。这意味着您只有一个函数调用，而不是两个。
• 您可能希望使用eq（）选择器来消除对$（“text”+id）的需要，并使其更整洁 尽管只有1个值（特别是“{opacity:0，}”），但仍有两个数据映射要传递给animate（），以逗号结尾。这将导致某些浏览器出现问题。
• 我不是100%确定，但我认为从函数本身调用函数是不好的，应该使用setTimeout（如果需要使用eval（）向函数传递一些参数以避免它，则使用匿名函数）
• 我知道你说过这没关系，但如果用户只是打开你的页面（例如，接电话后必须冲出），id可能会变得太大。他们不应该回到错误中。
• 您可以使用$（DO STUFF）而不是$（document）。ready（DO STUFF）

我把这些都拿了出来，并自由地将您的代码调整为以下内容：

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();
});

---

明亮的非常感谢你。一、 但是，讨厌

if

-子句，因此我将其替换为：

titleid=（titleid+1）%$text.lengthif

-子句，就无法编写代码，但是，如果我可以阻止它，我将以不同的方式进行。通常速度也更快：）

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();
});