1

私は自分自身に提起した小さな問題を解決するのに苦労しています。SOにはjquerys animation() メソッドに関する質問がたくさんあることは知っていますが、同様の質問は見つかりません。逆の場合はご容赦ください。

まず第一に、それがどのように機能するか：

私は 10 個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 は、バーがアニメーション化される幅を含む配列です。これにより、テキストが s に追加されなくなりますdiv。を使用する場合も同様ですtext(...)。s への書き込みをコールバック メソッドに入れない場合div、すべてが機能しますが、テキストはアニメーションの開始時に既に表示されています。

このフィドルを確認してください。ご覧のとおり、最初の 10 個のバーは適切にアニメーション化されていますが、テキストは追加されていません。他の同じことについては、テキストが早く追加されます。テキストのフェードインを含めて、これを適切に解決するにはどうすればよいですか? テキストを別のテキストにラップせずにフェードインすることさえ可能divですか?

4

4 に答える 4

1

修正済み: http://jsfiddle.net/Vj8hy/2/ テキストのフェードインは、ループ内のコールバックに

はなりません。$.animatefor

于 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 に答える