jquery动画与延迟重叠

Question

我在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>

JS

        /*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*/