Animate Each

HTML

<ul id="demo">
    <li>The quick</li>
    <li>Brown fox</li>
    <li>Jumped over</li>
    <li>The lazy</li>
    <li>DOGS!</li>
</ul>









<script type="text/javascript">(function(a){a.fn.animateEach=function(c,e,f){var b=0,d=this;f=a.proxy(f||(typeof e==="function"?e:a.noop),this);e=typeof e!=="function"?e:300;(function(){d.eq(b++).animate(c,e,d.length>b?arguments.callee:f)})();return this}}(jQuery));</script>

CSS

li {
    background-color: #FFFFCF;
    white-space: nowrap;
    display: none;
}

JavaScript

$('#demo li').animateEach({'font-size': '24px', 'width': '100%'}, function() {
    $(this).css('background-color', 'transparent');
});