“径向”显示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元素

回答

相关问题