jQuery遞歸淡入功能

我試圖給一個標誌設置動畫。該標記看起來是這樣的：jQuery遞歸淡入功能

<div id="logo"> 
    <h1> 
     <span>A</span><span>n</span><span>t</span><span>o</span><span>n</span><span>i</span><span>o</span><span>R</span><span>o</span><span>s</span><span>s</span><span>i</span> 
    </h1> 
    <h2>composer</h2> 
</div>

我想要做的就是讓淡入每個<span>內#logo效果。要做到這一點，我用這個代碼：

function fadeInRecursive (elementToFade) { 

    if (!elementToFade) { 
     elementToFade = $('#logo span:first-child') 
    } 

    var next = elementToFade.next('#logo span') 

    if (!next) {return false} 

    elementToFade.animate({ 
     opacity: 1 
    }, 3000, fadeInRecursive(next)) 
} 

$(document).ready(fadeInRecursive)

但Firefox崩潰...

我在做什麼錯？

來源

2012-06-13 Simone

我想你想'$（文件）。就緒（fadeInRecursive） ;''沒有'（）' - 那*調用函數，但你只想*參考*函數。 – Pointy

另外，用'var'聲明「next」！ ... 等一下;它應該是全球性的嗎？那麼，在全局範圍用'var'聲明它，或者把它全部封裝在一個閉包中。 – Pointy

哦，男人，我不能看看沒有分號的代碼... –

這裏有一個通用的函數，將在每一個項目淡入選擇，一前一後：

function fadeInSuccessive(selector, t) { 
    var items = $(selector); 
    var index = 0; 

    function next() { 
     if (index < items.length) { 
      items.eq(index++).fadeIn(t, next); 
     } 
    } 
    next(); 
} 

fadeInSuccessive("#logo span", 1000);

和工作演示：http://jsfiddle.net/jfriend00/vzgBd/

這實際上並不使用遞歸（儘管它可能看起來像是這樣），因爲連續調用next()發生在一段時間後，由動畫完成觸發，當它被調用時，先前調用next()已經完成，所以它不是技術上的遞歸。

，這裏是一個更通用的實現做一個jQuery的方法：

$.fn.fadeInSuccessive = function(t, fn) { 
    var index = 0; 
    var self = this; 

    function next() { 
     if (index < self.length) { 
      self.eq(index++).fadeIn(t, next); 
     } else { 
      if (fn) { 
       fn.call(self); 
      } 
     } 
    } 
    next(); 
} 

$("#logo span").fadeInSuccessive(1000, function() { 
    $(document.body).append("<br>Done!"); 
});

一個工作演示：http://jsfiddle.net/jfriend00/zTURy/

來源

2012-06-13 17:12:52 jfriend00

您可以通過將要素在queue避免遞歸：

$("#logo span").each(function(n, e) { 
    $(e).hide(); 
    $("#logo").queue(function() { $(e).fadeIn(function() { $("#logo").dequeue()}) });    
});

http://jsfiddle.net/YmVrQ/

這裏還有一個「遞歸」的方法：

function fadeInRecursive (elems) { 
    if (elems) 
     $(elems.shift()).fadeIn(function() { fadeInRecursive(elems) }); 
} 

fadeInRecursive($.makeArray($("#logo span")));

或者在什麼jfriend00有精神發表：

var n = 0; 
(function() { $("#logo span").eq(n++).fadeIn(arguments.callee) })();

來源

2012-06-13 17:11:15 georg

不是'參數。被調用者（）'不推薦前進，禁止在嚴格模式？ – jfriend00

jQuery遞歸淡入功能

回答

相關問題