sequencing (text lines flairvisible)

sequencing

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

var list,len, i;

list = $('ul li');
len = list.length;
i = 0;

function animateList(){
 if(i < len){
    list.slice(i, i+1).css({
            'opacity': 0,
            'margin-bottom': '40px',
            'margin-left': '40px'
        })
        .animate({
            'opacity': 1,
            'margin-bottom': 0,
            'margin-left': 0
        }, 400 + (i*100));
     i++;
     animateList();
   }
}

animateList();