Simple Sequencing with dfds

by Reusablecode

HTML

<h2>Features</h2>
<ul>
    <li>FaceTime video calling</li>
    <li>Retina display</li>
    <li>Multitasking</li>
    <li>HD video recording and editing</li>
    <li>5-megapixel camera with LED flash</li>
    <li>FaceTime video calling</li>
    <li>Retina display</li>
    <li>Multitasking</li>
    <li>HD video recording and editing</li>
    <li>5-megapixel camera with LED flash</li>
</ul>

CSS

html
{
    font: 90% Helvetica, Arial, sans-serif;   
}

h2
{
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid black;
    margin-bottom: 6px;
    padding-bottom: 6px;
}

ul li
{
    padding: 3px 0;
}

JavaScript

$.fn.animateDFD = function( props, options ) {
    options = options || {};
    var dfd = $.Deferred(),
        complete = options.complete,
        count = this.length;
           
    options.complete = function() {         
        complete && complete.call( this );
        if ( !--count ) {
            dfd.resolve();
        }    
    }
    $.fn.animate.call( this, props, options );
        
    return dfd.promise();
};


var w = new Array();

$.each($('ul li'), function(i, y){
    $(this).css({'opacity': 0,
                 'margin-bottom': '40px',
                 'margin-left': '40px'
            });    
            w.push($(this)
               .animateDFD(
                   { 'opacity': 1,
                     'margin-bottom': 0,
                     'margin-left': 0},
                   {duration:400 + (i*100),
                    complete:function(){}
                   }));
         });
           
       $.when.apply( null, w ).then(function(){
           $('body')
               .append('<b>completed</b>');

});