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

Question

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

这是我创建的，但是，我怀疑它的运行情况，也就是说，它是否占用浏览器的 CPU 资源。我关心的问题之一也是 Javascript 的递归深度。

我有以下代码（我也将其与 CSS 和 HTML 一起包含在 jsfiddle 中 http://jsfiddle.jsfiddle.html 中） 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);
});

我的问题是这是否是正确的方法；或者是否有更好的（也许是非递归的）方法来做到这一点？

附言。由于这是一个网站的横幅，我不担心 id 太大，因为人们可能已经离开了。

Answer 1

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

• 您可能想要动态读取标题数量，而不是必须在脚本顶部指定它们。
• 您在每个标题中使用相同的选择器 $("#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();
});