Question

Following function reveals <li> elements one by one from left to right.

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

Executing like that

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

Lets say we have 9 <li> elements. What I want to get is, first reveal 5th element, then 4th and 6th, then 3th and 7th…

If there is 8 <li> elements, reveal at first 4th and 5th, and so on…

Any suggestions?

Answer 1

Here’s a plugin example. Does this help?

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

})