jquery使用延迟重叠设置动画

我已经在css+jquery中创建了一个从第一个条到最后一个条的条形图。有时（完全随机）会出现一次出现所有条形图或更频繁地出现从右到左的一个零件一次出现，而从左到右的前一个零件仍在动画中出现

HTML代码

<ul id="bars">

        <li>
        <div style='height:82%' class='graphs yellow'>
        <span class='info'>07/05/14<br/>461</span>
        </div>
        </li>
        <li>
        <div style='height:95%' class='graphs yellow'>
        <span class='info'>08/05/14<br/>530</span>
        </div>
        </li>
        <li>
        <div style='height:74.4%' class='graphs yellow'>
        <span class='info'>09/05/14<br/>421</span>
        </div>
        </li>
        <li>
        <div style='height:83.9%' class='graphs yellow'>
        <span class='info'>10/05/14<br/>471</span>
        </div>
        </li>
        <li>
        <div style='height:73.9%' class='graphs yellow'>
        <span class='info'>11/05/14<br/>418</span>
        </div>
        </li>
        <li>
        <div style='height:46.1%' class='graphs '>
        <span class='info'>12/05/14<br/>271</span>
        </div>
        </li>
        <li>
        <div style='height:46.1%' class='graphs '>
        <span class='info'>13/05/14<br/>271</span>
        </div>
        </li>
        <li>
        <div style='height:52%' class='graphs yellow'>
        <span class='info'>14/05/14<br/>302</span>
        </div>
        </li>
        <li>
        <div style='height:44.8%' class='graphs '>
        <span class='info'>15/05/14<br/>264</span>
        </div>
        </li>
        <li>
        <div style='height:36.5%' class='graphs '>
        <span class='info'>16/05/14<br/>220</span>
        </div>
        </li>
        <li>
        <div style='height:49.9%' class='graphs '>
        <span class='info'>17/05/14<br/>291</span>
        </div>
        </li>
        <li>
        <div style='height:46.3%' class='graphs '>
        <span class='info'>18/05/14<br/>272</span>
        </div>
        </li>
        <li>
        <div style='height:31%' class='graphs '>
        <span class='info'>19/05/14<br/>191</span>
        </div>
        </li>
        <li>
        <div style='height:31%' class='graphs '>
        <span class='info'>20/05/14<br/>191</span>
        </div>
        </li>
        <li>
        <div style='height:32.2%' class='graphs '>
        <span class='info'>21/05/14<br/>197</span>
        </div>
        </li>
        <li>
        <div style='height:35.4%' class='graphs '>
        <span class='info'>22/05/14<br/>214</span>
        </div>
        </li>
        <li>
        <div style='height:36.5%' class='graphs '>
        <span class='info'>23/05/14<br/>220</span>
        </div>
        </li>
        <li>
        <div style='height:38%' class='graphs '>
        <span class='info'>24/05/14<br/>228</span>
        </div>
        </li>
        <li>
        <div style='height:37.1%' class='graphs '>
        <span class='info'>25/05/14<br/>223</span>
        </div>
        </li>
        <li>
        <div style='height:32.4%' class='graphs '>
        <span class='info'>26/05/14<br/>198</span>
        </div>
        </li>
        <li>
        <div style='height:29.5%' class='graphs '>
        <span class='info'>27/05/14<br/>183</span>
        </div>
        </li>
        <li>
        <div style='height:29.3%' class='graphs '>
        <span class='info'>28/05/14<br/>182</span>
        </div>
        </li>
        <li>
        <div style='height:37.5%' class='graphs '>
        <span class='info'>29/05/14<br/>225</span>
        </div>
        </li>
        <li>
        <div style='height:43.5%' class='graphs '>
        <span class='info'>30/05/14<br/>257</span>
        </div>
        </li>
        <li>
        <div style='height:57.8%' class='graphs yellow'>
        <span class='info'>31/05/14<br/>333</span>
        </div>
        </li>
        <li>
        <div style='height:50.7%' class='graphs '>
        <span class='info'>01/06/14<br/>295</span>
        </div>
        </li>
        <li>
        <div style='height:43.9%' class='graphs '>
        <span class='info'>02/06/14<br/>259</span>
        </div>
        </li>
        <li>
        <div style='height:31.4%' class='graphs '>
        <span class='info'>03/06/14<br/>193</span>
        </div>
        </li>
        <li>
        <div style='height:36.3%' class='graphs '>
        <span class='info'>04/06/14<br/>219</span>
        </div>
        </li>
        <li>
        <div style='height:40.7%' class='graphs '>
        <span class='info'>05/06/14<br/>242</span>
        </div>
        </li>
        <li>
        <div style='height:33.7%' class='graphs '>
        <span class='info'>06/06/14<br/>205</span>
        </div>
        </li>
        <li>
        <div style='height:47.5%' class='graphs '>
        <span class='info'>07/06/14<br/>278</span>
        </div>
        </li>
</ul>

---

请不要使用内联样式-。我必须这样做，因为html是从动态内容实时生成的。

        /*BAR GRAPH*/
            $( "#bars > li" ).each(function(i) {
              var height = $(this).children("div").height();
              $(this).children("div").fadeIn().delay(20*i).animate({
                        height: height
                    }, 1500);
                console.log(i);
            });

            /* BAR GRAPH*/