Question

以下函数从左到右依次显示<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>元素，请在第4和第5时显示，依此类推......

有什么建议吗？

Answer 1

这是一个插件示例。这有帮助吗？

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

})

Answer 2

在函数外面定义一个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;
}

Answer 3

我写了一个快速的解决方案，但我还没有做过任何测试，所以我强烈建议你把它快速旋转一下。那里有基本的逻辑。如果您需要更多信息，请告诉我们！

以下是代码：

$.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;
};

Answer 4

设置一个尚未可见的元素数组，然后淡化中间元素，将其从数组中删除，递归直到空？

“径向”显示li元素

4 个答案: