褪色横幅像jQuery文本

Question

我有一个标题文本，我想把它渐变到一个框中。然后，副标题应该在它的下面消失。一旦两者都可见，它们应该淡出，下一组应该以相同的方式淡出。

这是我创建的，但是，我对它运行得如何有疑问，也就是说，如果它需要太多的浏览器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);
});

我的问题是，如果这是正确的方法;或者是否有更好的，非递归的方法?

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

Answer 1

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

• 你可能想动态读取标题的数量，而不是在脚本的顶部指定它们。
• 在每个标题中使用相同的选择器$("#text"+ id)和$("#subtext"+ id)两次。您应该只执行一次，并将其赋值给一个变量。这意味着你只有一个函数调用，而不是两个。
你可能想使用eq()选择器来消除$("text" + id)的需要，并使其更整洁
• 有一对数据映射，你正在传递给animate()以逗号结束，即使只有1个值(特别是"{透明度:0，}")。
• 我不是100%确定，但我认为从内部调用函数是坏的，你应该使用setTimeout(并使用匿名函数，如果你需要传递函数一些参数，以避免使用eval())
• 我知道你说过这无关紧要，但如果用户只是让你的页面开着(例如，接完电话后又匆匆离开)，id变大就会发生。
• 你可以使用$(DO STUFF)而不是$(document)。准备好(东西)

我改变了这些，自由地将你的代码调整为如下:

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