Javascript “揭示李元素”；放射状；

以下函数从左到右依次显示

元素

$.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个

元素。我想得到的是，首先显示第五元素，然后是第四和第六元素，然后是第三和第七元素

如果有8个

元素，则在第一个第四个和第五个元素处显示，依此类推

---

有什么建议吗？

在函数外定义一个javascript数组，数组中的int值表示fadein的顺序。然后使用该数组的元素，而不是直接使用“i”变量

例如：

---

在函数外定义一个javascript数组，其值为int，表示fadein的顺序。然后使用该数组的元素，而不是直接使用“i”变量

例如：

---

设置一个尚不可见的元素数组，然后淡入中间元素，将其从数组中删除，递归至空？

设置一个尚不可见的元素数组，然后淡入中间元素，将其从数组中删除，递归至空？

以下是一个插件示例。这有用吗

HTML:

颜色
红色的
橙色的
黄色的
绿色的
蓝色的
靛蓝
紫罗兰色
方向
北
东边
南方
西部

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

})

$.fn.fadeInFromMiddle=函数（持续时间，回调）{
返回此值。每个（函数（）{
var radialFade=功能（$项目、持续时间、指数）{
setTimeout（函数（）{
var i，最大值，指数；
对于（i=0，max=index.length；i=0）{
radialFade（项目、持续时间、指数）；
}
else if（回调类型==“函数”）{
回调（）；
}
}，持续时间）；
};
//全部隐藏
var$items=$（this.children（）.css（'opacity'，0）；
//从中间显示
变量大小=$items.size（），
索引=[Math.ceil（size/2）-1]；//起点
如果（大小%2==0）{index.push（索引[0]+1）；}
radialFade（$items，duration，index）；//第二个参数是淡入淡出之间的延迟
});
};
$（函数（）{
$（'ol'）。中间的法德因（300）；
})

下面是一个插件示例。这有用吗

HTML:

颜色
红色的
橙色的
黄色的
绿色的
蓝色的
靛蓝
紫罗兰色
方向
北
东边
南方
西部

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

})

$.fn.fadeInFromMiddle=函数（持续时间，回调）{
返回此值。每个（函数（）{
var radialFade=功能（$项目、持续时间、指数）{
setTimeout（函数（）{
var i，最大值，指数；
对于（i=0，max=index.length；i=0）{
radialFade（项目、持续时间、指数）；
}
else if（回调类型==“函数”）{
回调（）；
}
}，持续时间）；
};
//全部隐藏
var$items=$（this.children（）.css（'opacity'，0）；
//从中间显示
变量大小=$items.size（），
索引=[Math.ceil（size/2）-1]；//起点
如果（大小%2==0）{index.push（索引[0]+1）；}
radialFade（$items，duration，index）；//第二个参数是淡入淡出之间的延迟
});
};
$（函数（）{
$（'ol'）。中间的法德因（300）；
})

我写了一个快速解决方案，但我还没有做任何测试，所以我强烈建议您使用它来快速旋转模块。基本逻辑就在那里。如果你需要更多信息，请告诉我

代码如下：

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

$.fn.fadeInEach=函数（持续时间，回调）{
var length=这个.length，
中间=数学楼层（长度/2）+1，
偏移量=0，
翻转=1，
持续时间=持续时间，
回调=回调，
那=这个；
函数chainFade（）{
如果（偏移量<长度）
即.eq（中间+偏移*翻转）
.fadeIn（持续时间，函数（）{
offset++；
翻转*=-1；
链褪色（）；
});
其他的
回调类型==“函数”&&callback（）；
}
链褪色（）；
归还这个；
};

我写了一个快速解决方案，但我还没有做任何测试，所以我强烈建议您使用它来快速旋转模块。基本逻辑就在那里。如果你需要更多信息，请告诉我

代码如下：

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

$.fn.fadeInEach=函数（持续时间，回调）{
var length=这个.length，
中间=数学楼层（长度/2）+1，
偏移量=0，
翻转=1，
持续时间=持续时间，
回调=回调，
那=这个；
函数chainFade（）{
如果（偏移量<长度）
即.eq（中间+偏移*翻转）
.fadeIn（持续时间，函数（）{
offset++；
翻转*=-1；
链褪色（）；
});
其他的
回调类型==“函数”&&callback（）；
}
链褪色（）；
归还这个；
};

很好，这是一个很酷的效果…这里有一把小提琴，使用你的答案谢谢！实际上，我将其转换为jQuery插件，并将您的示例转换为我的示例。我还添加了一个奇数示例和一个偶数示例。答案是Thx，但我的li菜单是水平的而不是垂直的，我看不到任何效果。所有的人都同时出现在你的面前好。。。你要修复什么？很好，这是一个很酷的效果…这里有一把小提琴使用你的答案谢谢！实际上，我将其转换为jQuery插件，并将您的示例转换为我的示例。我还添加了一个奇数示例和一个偶数示例。答案是Thx，但我的li菜单是水平的而不是垂直的，我看不到任何效果。所有的人都同时出现在你的面前好。。。你要修什么？