1

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

首先，它应该如何工作：

我有十个divs，它们的宽度应该分别设置为动画。在该动画结束后，应在其中写入一些文本淡入。

这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 是一个数组，其中包含条应动画到的宽度。这导致没有文本附加到divs 中。使用时也一样text(...)。如果我不将写入divs 的内容放入回调方法中，一切正常，但文本在动画开始时已经可见。

检查这个小提琴。如您所见，前十个条的动画效果很好，但没有附加任何文本。对于其他相同的事情，但文本被附加到早期。如何正确解决这个问题，包括文本的淡入？甚至可以淡入文本而不将其包装成另一个div？

4

4 回答 4

1

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

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

于 2013-01-15T20:52:06.710 回答
1

改变这个位

$(".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/

于 2013-01-15T20:53:11.320 回答
1

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

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

于 2013-01-15T20:57:05.130 回答
1

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

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

于 2013-01-15T21:00:08.480 回答