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

我的問題是，如果這是這樣做的正確方法;或者如果有更好的，也許沒有遞歸的方法呢？

PS。因爲這是一個網站的旗幟，我不擔心id是大的，因爲人們可能從那以後就開始了。

Answer 1

遞歸似乎沒什麼問題，但也有一些其他的東西，我看到：

• 你可能要動態閱讀的圖書數量，而不是在腳本的頂部指定。
• 您在每個標題中使用兩次相同的選擇器$（「＃text」+ id）和$（「＃subtext」+ id）。你應該只做一次，並將其分配給一個變量。這意味着你只有一個函數調用，而不是兩個。
• 您可能需要使用EQ（）選擇以消除$的需求（「文本」 + ID），使之更爲簡潔
• 有一對夫婦要傳遞到動畫（）的端到端數據地圖即使只有1個值（特別是「{opacity：0，}」），也可以使用逗號。這會在某些瀏覽器上造成問題。
• 我不是100％確定，但我認爲從自身內部調用函數是不好的，你應該使用setTimeout（並且如果你需要傳遞函數一些參數以避免使用eval（）），使用匿名函數）
• 我知道你說的沒關係，但是如果用戶剛剛離開你的頁面（例如接電話就不得不衝出去），id會變得太大。他們不應該回到錯誤。
• 您可以使用$（做的東西），而不是$（文件）。就緒（做的東西）

我把這些車並採取調整你的代碼下面的自由：

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