JQuery 对多个 div 进行动画处理并在其中写入文本

Question

我正在努力解决我向自己提出的一个小问题。我知道有很多关于 jquerys Animation() 方法的问题，但我没有找到任何类似的问题。若有相反情况，请见谅。

首先，它应该如何工作:

我有十个 div，它们应该在各自的宽度上单独进行动画处理。动画结束后，应该在其中写入一些淡入的文本。

这个 div 的 ID 为 userBar1, ..., userBar10。我尝试用回调方法解决

for(var i=0; i<barLengths.length; i++){
    var length = barLengths[i];
    $("#userBar"+(i+1)).animate({width: length+"px"}, function(){
        var t = new Number(usValues[i]).toFixed(2);
        $("#userBar"+(i+1)).html("CHF").fadeIn();
    });
}

而 barLengths 是一个数组，其中包含条形动画应达到的宽度。这会导致 div 中不会添加任何文本。使用 text(...) 时也是如此。如果我不将写入内容放入回调方法中，一切正常，但文本在动画开始时就已经可见。

检查这个fiddle 。正如您所看到的，前十个栏的动画效果很好，但没有附加任何文本。对于其他人来说也是如此，但文本已提前附加。我怎样才能正确解决这个问题，包括文本的淡入？是否可以淡入文本而不将其包装到另一个 div 中？

Answer 1

已修复:http://jsfiddle.net/Vj8hy/2/

文本淡入淡出不能是 for 循环内的 $.animate 回调。