用jQuery淡化横幅文本

时间:2011-07-11 09:14:14

标签: jquery recursion correctness fading

我有一个标题文字,我想把它淡入一个盒子里。 之后,副标题应在其下方淡入淡出。 一旦两者都可见,它们应该淡出,下一组应该以同样的方式淡入。

然而,我已经创建了,我对它的运行情况有疑问,也就是说,如果浏览器需要很多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变大,因为人们可能已经移动了。

1 个答案:

答案 0 :(得分:2)

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

  • 您可能希望动态读取标题数量,而不必在脚本顶部指定它们。
  • 您在每个标题中使用相同的选择器$(“#text”+ id)和$(“#subtext”+ id)两次。您应该只执行一次,并将其分配给变量。这意味着您只有一个函数调用,而不是两个。
  • 你可能想要使用eq()选择器来消除$(“text”+ id)的需要并使其更加整洁 您传递给animate()的几个数据映射以逗号结尾,即使只有1个值(特别是“{opacity:0,}”)。这会在某些浏览器上造成问题。
  • 我不是100%肯定,但我认为从内部调用函数是坏的,你应该使用setTimeout(并使用匿名函数,如果你需要传递函数一些参数以避免使用eval())
  • 我知道你说这没关系,但是如果用户只是让你的页面打开(例如接听电话然后必须冲出去),那么id会变得太大。他们不应该回到错误。
  • 您可以使用$(DO STUFF)而不是$(文档).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();
});