「徑向」顯示li元素

以下函數從左到右顯示<li>個元素。「徑向」顯示li元素

$.fn.fadeInEach = function(duration,callback){ 
    function fadeIn(i,elements,duration,callback){ 
     if(i >= elements.length) 
      typeof callback == 'function' && callback(); 
     else 
      elements.eq(i).fadeIn(duration,function(){ 
       fadeIn(i+1,elements,duration,callback); 
      });   
    } 
    fadeIn(0,this,duration,callback); 
    return this; 
}

執行這樣的

$('.ftr-social-icons ul li').fadeInEach(200);

比方說，我們有9個<li>元素。我想獲得的，首先揭示5個元素，那麼第4和第6，然後3屆和第7 ...

如果有8個<li>元素，起初第四和第五顯示，等等...

有什麼建議嗎？

來源

2011-12-12 Tural Ali

下面是一個插件示例。這有幫助嗎？

HTML：

<h2>Colors</h2> 
<ol> 
    <li>Red</li> 
    <li>Orange</li> 
    <li>Yellow</li> 
    <li>Green</li> 
    <li>Blue</li> 
    <li>Indigo</li> 
    <li>Violet</li> 
</ol> 

    <h2>Directions</h2> 
<ol> 
    <li>North</li> 
    <li>East</li> 
    <li>South</li> 
    <li>West</li> 
</ol>

的JavaScript：

$.fn.fadeInFromMiddle = function(duration, callback) { 
    return this.each(function() { 
     var radialFade = function($items, duration, indices) { 
      setTimeout(function() { 
       var i, max, index; 

       for(i=0, max=indices.length; i<max; i++) { 
        index = indices[i] 
        $items.eq(index).animate({ 'opacity' : 1 }); 
        indices[i] = i === 0 ? index - 1 : index + 1; 
       } 

       if(indices.length === 1) { 
        indices.push(indices[0]+2); 
       } 
       if(indices[0] >= 0) { 
        radialFade($items, duration, indices); 
       } 
       else if(typeof callback === "function") { 
        callback(); 
       } 

      }, duration); 
     }; 

     // hide all 
     var $items = $(this).children().css('opacity',0); 

     // show from middle 
     var size = $items.size(), 
      indices = [ Math.ceil(size/2)-1 ]; // starting point 
     if(size % 2 === 0) { indices.push(indices[0]+1); } 
     radialFade($items, duration, indices); // second param is delay between fades 

    }); 
}; 
$(function() { 
    $('ol').fadeInFromMiddle(300); 

})

來源

2011-12-12 04:53:24

不錯，這是一個涼爽的效果......這裏是使用你的答案【示例的jsfiddle]小提琴（http://jsfiddle.net/pxfunc/eShj4/） – MikeM

謝謝！我實際上將它轉換爲一個jQuery插件，並將你的例子分解爲我的。我還添加了一個奇怪的例子，甚至一個。 [新例子]（http://jsfiddle.net/thejase/B5YXD/2/） –

Thx回答，但我的菜單是水平不垂直，我看不到任何效果。所有出現在你的功能一次 –

定義一個javascript數組的外側功能與int值代表fadein的順序。然後使用該數組的元素而不是直接使用「i」變量。

E.g：

var fadeOrder = new Array(5, 4, 6, 3, 7, 2, 1); 

$.fn.fadeInEach = function(duration,callback){ 
    function fadeIn(i,elements,duration,callback){ 
     if(fadeOrder[i] >= elements.length) 
      typeof callback == 'function' && callback(); 
     else 
      elements.eq(fadeOrder[i]).fadeIn(duration,function(){ 
       fadeIn(i+1,elements,duration,callback); 
      });   
    } 
    fadeIn(0,this,duration,callback); 
    return this; 
}

來源

2011-12-12 04:23:21

設置尚未成爲可見然後褪色中間元件，從數組中刪除它，直到遞歸空元件的陣列？

來源

2011-12-12 04:28:20

我寫了一個快速的解決方案，但我沒有做任何測試，所以我強烈建議你把它周圍的塊中的快速旋轉。基本邏輯在那裏。如果您需要更多信息，請告訴我！

下面的代碼：

$.fn.fadeInEach = function(duration, callback){ 
    var length = this.length, 
     middle = Math.floor(length/2) + 1, 
     offset = 0, 
     flip = 1, 
     duration = duration, 
     callback = callback, 
     that = this; 

    function chainFade(){ 
    if(offset < length) 
     that.eq(middle + offset * flip) 
      .fadeIn(duration, function(){ 
       offset++; 
       flip *= -1; 
       chainFade(); 
      }); 
    else 
     typeof callback == 'function' && callback(); 
    } 
    chainFade(); 

    return this; 
};

來源

2011-12-12 05:03:48 THEtheChad

「徑向」顯示li元素

回答

相關問題