Question

我正在努力解决我对自己提出的一个小问题。我知道在SO上有很多关于jquerys animation（）方法的问题，但我没有找到任何类似的问题。在相反的情况下，请原谅。

首先，它应该如何运作：

我有十个div s，每个人的宽度应该是动画的。在动画结束后，应该在其中写入一些文字。

这个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(...)时也是如此。如果我没有将div的写入放入回调方法中，一切正常，但文本在动画开始时已经可见。

检查fiddle。如您所见，前十个条形图很好，但没有附加文本。对于其他同样的事情，但文本是附加到早期。如何正确解决这个问题，包括文本的淡入？甚至可以淡化文本而不将其包装到另一个div？

Answer 1

修正：http://jsfiddle.net/Vj8hy/2/

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

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()
});

}）;

你应该好。虽然淡入淡出会需要额外的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不在回调函数的范围内。您可以在该回调函数中再次循环，但其他海报是正确的，fadein效果将需要另一个div。

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

JQuery为许多div设置动画并在其中编写文本

4 个答案: