JQuery动画了许多div，并在其中写入文本

Question

我正在努力解决我给自己提出的一个小问题。我知道在SO上有很多关于jquery animation()方法的问题，但我没有发现任何类似的问题。如果情况相反，请原谅。

首先，它应该如何工作:

我有10个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();
    });
}

而barlength是一个数组，它包含了动画条的宽度。这导致没有文本附加到div s中。当使用text(...)时也是如此。如果我没有将div中的文字写入回调方法中，一切都可以正常工作，但是文本已经在动画的开头可见了。

检查这个小提琴。如您所见，前十个小节的动画效果很好，但没有附加文本。对于其他相同的东西，但是文本被附加到前面。我怎样才能解决这个问题，包括文本的淡出?是否有可能在不将文本包装成另一个div的情况下淡出文本?

Answer 1

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

在for循环中，文本中的褪色不能是$.animate回调。

Answer 2

更改此位

$(".bar").each(function(i){
$(this).animate({width: lengths[i]+"px"}, function(){
   $("#bar"+(i+1)).html(values[i]);
  console.log("#bar"+(i+1));// same thing with text()
});

});

，你应该很好。虽然fade 将需要一个额外的div，等等

http://jsfiddle.net/MrzRx/3/

Answer 3

需要添加元素，文本节点不能动画化。

(function go(i) {
   $("#bar"+(i+1)).animate({width: lengths[i]+"px"}, function(){
      $('<span>'+values[i]+'</span>').hide().appendTo(this).fadeIn();
      if (i < lengths.length) go(i+1);
   });
})(0)

http://jsfiddle.net/kkrYR/

Answer 4

您的示例不起作用的原因是i不在回调函数的范围内。你可以在回调函数中再次循环，但其他海报是正确的，渐隐效果将需要另一个div。

http://jsfiddle.net/mxDv7/1/