Выявить ли элементы "радиально"

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

Я написал быстрое решение, но я не проводил никаких тестов, поэтому я настоятельно рекомендую вам взять его для быстрого вращения вокруг блока. Основная логика есть. Если вам нужна дополнительная информация, дайте мне знать!

Вот код:

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

Определить массив javascript вне функции со значениями ints, которые представляют порядок fadein.затем используйте элементы этого массива вместо прямой переменной «i».

Например:

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 4

установить массив элементов, которые еще не видны, затем исчезнуть средний элемент, удалить его из массива, рекурсировать до пустого?