Sequencing Text Animation

by sijoma

HTML

<script src="https://gist.github.com/raw/850322/6b3352ff668b086ba871d04ca132a25265f57290/jquery.ba-seq.js"></script>
<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

$('ul li').hide().seq(function( next ) {
    
    $(this)
        .show()
        .css({
            'opacity': 0,
            'margin-bottom': '40px',
            'margin-left': '40px'
        })
        .animate({
            'opacity': 1,
            'margin-bottom': 0,
            'margin-left': 0
        }, 400);
    
    setTimeout( next, 80 );
    
}, function() {
    console.log( 'animations complete!' );
});