jquery - 使用jQuery像文本一样淡出横幅

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

我创建了这个，但是，我对它的运行状况（即浏览器需要占用大量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变大，因为人们可能从那以后就搬了。

最佳答案

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

您可能希望动态读取标题的数量，而不必在脚本顶部指定它们。
您在每个标题中两次使用相同的选择器$（“＃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();
});